首页 技术 正文
技术 2022年11月14日
0 收藏 778 点赞 4,443 浏览 1246 个字

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属性,还可以使用图片来创建边框。

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,085
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,560
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,409
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,182
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,819
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,902