Heluyao的博客 {11gz.com}

此文提供“靓图”对照，帮助记忆再加深印象。此文仅介绍几个可以说是比较“靠谱”的属性或值，其中包括有渐变、RGBA、文本阴影、Box 阴影、圆角。

渐变 gradient

background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));

webkit引擎下，5个参数值，记住每个都需要用“逗号”隔开就是了。

1. 渐变的类型? (linear)
2. 渐变开始的X Y 轴坐标(0 0 – 或者left-top)
3. 渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
4. 开始的颜色? (from(red))
5. 结束的颜色? (to(blue))

background: -moz-linear-gradient(top, red, blue);

Gecko引擎下，只有3个参数，linear已经放到了属性前缀中了。

1. 渐变从哪里开始? (top – 我们也可以使用度数，比如-45deg)
2. 开始的颜色? (red)
3. 结束的颜色? (blue)

background:linear-gradient(top, red, blue);

最后这个就是标准版本了，良好的前瞻是需要的。

还有几句要补充的：

如果你想设置超过2种以上的颜色渐变，那么可以这样写：

对于目前还没有支持css3的渐变的浏览器，比如IE、Opear，要记住在最前面写下一个简单的背景颜色(background-color)，否则看到的将是空白。

Firefox可以使用角度来设定渐变的方向，而webkit只能使用x和y轴的坐标。

最后，回到IE：

IE不支持CSS3渐变，不过好在IE有个渐变滤镜，可以实现最简单的渐变效果：

渐变的效果可能在每个浏览器里看起来都不相同，此乃正常现象。

————————————————-分割一下————————————————-

RGBA

R\G\B 分别指颜色值，a指透明度，0(透明)-1(不透明)。

只要是与颜色值有关的属性，都可以使用RGBA。

————————————————-分割一下————————————————-

文本阴影 text-shadow

x-offset(X轴距离), y-offset(Y轴距离), blur(阴影大小), color(阴影颜色)。

x-offset数值为正那么方向右，负则向左；y-offset数值正下负上。

可以为元素设置多重的阴影，中间用“逗号”隔开就行了。

————————————————-分割一下————————————————-

Box 阴影 box-shadow

与文本阴影(text-shadow)写法是一致的，唯一区别在于添加了box-shadow的同时还别忘了火狐(Gecko引擎)用-moz-，Safari、Chrome等WebKit引擎则添加-webkit-。

照样也支持多重阴影，中间用“逗号”隔开。

————————————————-分割一下————————————————-

圆角 border-radius

与边界、填充类似，也要区分火狐(Gecko引擎)，Safari、Chrome等WebKit引擎。

四个角可以设置不同值的，但要记得-moz-与-webkit-的区别。

原文地址：The Basics of CSS3

标签：CSS3

这篇文章发表于2010年03月27日，下午，5:34，归类于html/css/xml/xsl。您可以通过订阅RSS 2.0跟踪对这篇文章的评论，也可以发表您的评论，或者从您的站点trackback。