标签: css3

RGBA是非常有趣的,所以-webkit-gradient,-moz-gradient和呃... progid:DXImageTransform.Microsoft.gradient...是啊.:)

有没有办法将RGBA和渐变两者结合起来,这样就可以使用当前/最新的CSS规范来实现Alpha透明度的渐变.

我的问题

1. 这些方法中的任何一种都是专业网页设计师的首选吗？

2. 在绘制网站时,这些方法中的任何一种都是通过网络浏览器进行优化的吗？

3. 这只是个人偏好吗？

4. 还有其他我缺少的技术吗？

注意:以上问题涉及设计多列布局

向左飘浮;

http://jsfiddle.net/CDe6a/

这是我在创建列布局时总是使用的方法,它似乎工作得很好.虽然父母确实崩溃了,所以你只需要记住clear:both;以后.另一个骗子,我只是发现无法垂直对齐文本.

显示:内联;

这似乎纠正了折叠父级的问题,但增加了空格.

http://jsfiddle.net/CDe6a/1/

从html中删除空格似乎是最容易解决这个问题的方法,但如果你对你的html非常挑剔则不需要.

http://jsfiddle.net/CDe6a/2/

显示:内联块;

似乎表现得很像display:inline;.

http://jsfiddle.net/CDe6a/3/

显示:表细胞;

http://jsfiddle.net/CDe6a/4/

工作完美.

我的想法:

我确定我错过了很多东西,比如某些例外情况会破坏布局,但display:table-cell;似乎效果最好,我想我会开始更换,float:left;因为我似乎总是陷入困境clear:both;.我在网上看过很多关于这个的文章和博客,但没有一个能给我一个明确的答案,说明我在设置我的网站时应该使用什么.

我知道这可以通过Javascript轻松解决,但我只对纯CSS解决方案感兴趣.

我想要一种动态调整文本大小的方法,以便它始终适合固定的div.以下是示例标记:

<div style="width: 200px; height: 1em; overflow: hidden;">
  <p>Some sample dynamic amount of text here</p>
</div>

我想也许这可以通过在ems中指定容器的宽度,并使字体大小继承该值来实现？

在CSS3 font-face,有多个字体类型包括等ttf,eot,woff,svg和cff.

我们为什么要使用所有这些类型？

如果它们对于不同的浏览器是特殊的,为什么它们的数量大于主要Web浏览器的数量？

我正在尝试使用background-color悬停菜单项时的过渡效果,但它不起作用.这是我的CSS代码:

#content #nav a:hover {
    color: black;
    background-color: #AD310B;
    /* Firefox */
    -moz-transition: all 1s ease-in;
    /* WebKit */
    -webkit-transition: all 1s ease-in;
    /* Opera */
    -o-transition: all 1s ease-in;
    /* Standard */
    transition: all 1s ease-in;
}

这#nav div是一个菜单ul项目列表.

我有一个table,其tds的动态创建.我知道如何得到第一个和最后一个孩子,但我的问题是:

有没有办法让第二个或第三个孩子使用CSS？

我需要动态地将横幅图像加载到HTML5应用程序中,并希望有几个不同的版本以适应屏幕宽度.我无法正确确定手机的屏幕宽度,因此我能想到的唯一方法是添加div的背景图像并使用@media确定屏幕宽度并显示正确的图像.

例如:

 <span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span>

这有可能,还是有人有任何其他建议吗？

我正在opacity: 0;CSS 中设置的一些元素上运行动画.动画类应用于onClick,并且使用关键帧,它将不透明度更改0为1(以及其他内容).

不幸的是,当动画结束时,元素将返回opacity: 0(在Firefox和Chrome中).我的自然思维是动画元素保持最终状态,覆盖其原始属性.这不是真的吗？如果没有,我怎样才能让元素这样做？

代码(不包括前缀版本):

@keyframes bubble {
    0%   { transform:scale(0.5); opacity:0.0; }
    50%  { transform:scale(1.2); opacity:0.5; }
    100% { transform:scale(1.0); opacity:1.0; }
}

我在我的盒子里使用点缀式边框

.box {
    width: 300px;
    height: 200px;
    border: dotted 1px #f00;
    float: left;
}

我想增加边框每个点之间的空间.

我正在尝试将渐变应用到边框,我认为这样做很简单:

border-color: -moz-linear-gradient(top, #555555, #111111);

但这不起作用.

有谁知道边界渐变的正确方法是什么？