IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性1

通过CSS选择器找到元素，就要使用CSS属性给找到的元素设置样式。尽管现在的浏览器已经支持了众多的CSS3属性，但作为初学者，最应该关注的就是一些“主流”的属性，如border-radius、box-shadow、transform等。它们有良好的文档、极佳的测试效果并且经常用到，将成为你设计网站的得力助手。学习CSS3的属性就要先从主流的属性开始，其他属性则可通过CSS3手册获得帮助。具体实例展示，读者可以在下一章大量学习。本节主要学习CSS3属性的用法及兼容性。

1  使用CSS3属性前的准备

虽然目前主流的浏览器大多不支持CSS3的大多数属性，但还是鼓励读者在前端开发中要学会并且运用这些CSS3属性，因为这是未来的发展趋势。关键是首先要确定你是否对各个浏览器之间的细微差别有所了解，你能肯定地说IE显示的90°角就不圆滑吗？这取决于你的决定。但是要永远记住，网站设计不必看到所有浏览器的不同。在使用CSS3的一些高级特性时，需指定所有浏览器的前缀。CSS3的前缀是一家浏览器生产商经常使用的一种方式，它暗示该CSS属性或规则尚未成为W3C标准的一部分。CSS3前缀的浏览器属性规则如表1所示。

表1  CSS3前缀的浏览器属性规则

既然CSS3代码中（暂时）需要写上这么多前缀，就需要注意顺序问题，要先写私有的CSS3属性，再写标准的CSS3属性。如果以后当一个属性成为标准，并且被Firefox、Chrome等浏览器的最新版普遍兼容的时候，就可以去除这些前缀了。

2  边框属性

通过CSS3，用户能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框。圆角实现是众多CSS3属性中最受欢迎的一种，它通过border-radius属性来实现，是CSS3中级别最高的一个属性。radius就是半径的意思，用这个属性既可以很容易地做出圆角效果，也可以做出圆形效果。原理很简单，“正方形的内切圆的半径等于正方形边长的一半”。边框属性的使用格式如下：

可以通过box-shadow属性向边框添加一个或多个阴影，这也是开发时常用的效果。使用示例如下所示：

box-shadow属性是由逗号分隔的阴影列表，每个阴影由2～4个长度值、可选的颜色值及可选的inset关键词来规定，省略长度的值是0。该属性可用值如下。

Ø　none：无阴影。

Ø　<length>①：第1个长度值，用来设置对象的阴影水平偏移值。可以为负值。

Ø　<length>②：第2个长度值，用来设置对象的阴影垂直偏移值。可以为负值。

Ø　<length>③：如果提供了第3个长度值，则用来设置对象的阴影模糊值。不允许为负值。

Ø　<length>④：如果提供了第4个长度值，则用来设置对象的阴影外延值。可以为负值。

Ø　<color>：设置对象的阴影的颜色。

Ø　inset：设置对象的阴影类型为内阴影。该值为空时，对象的阴影类型为外阴影。

此属性还可以设置多组值，中间用“,”隔开。另外，通过CSS3的border-image属性，还可以使用图片来创建边框。