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

时间:2022-03-08 18:07:23

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前缀的浏览器属性规则

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

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

2  边框属性

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

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

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

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

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

Ø none:无阴影。

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

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

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

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

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

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

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