1.CSS3 概述
-
CSS3是CSS2的升级版本,它在CSS2的基础上,新增了很多强大的新功能,从而解决一些实际 面临的问题。 -
CSS3在未来会按照模块化的方式去发展: www.w3.org/Style/CSS/c… -
CSS3的新特性如下:- 新增了更加实用的选择器,例如:动态伪类选择器、目标伪类选择器、伪元素选择器等等。
- 新增了更好的视觉效果,例如:圆角、阴影、渐变等。
- 新增了丰富的背景效果,例如:支持多个背景图片,同时新增了若干个背景相关的属性。
- 新增了全新的布局方案 —— 弹性盒子。
- 新增了
Web 字体,可以显示用户电脑上没有安装的字体。 - 增强了颜色,例如:
HSL、HSLA、RGBA几种新的颜色模式,新增opacity属性来控制 透明度。 - 增加了
2D和3D变换,例如:旋转、扭曲、缩放、位移等。 - 增加动画与过渡效果,让效果的变换更具流线性、平滑性。 ……
2. CSS3私有前缀
2.1 什么是私有前缀
如下代码中的 -webkit- 就是私有前缀
div {
width:400px;
height:400px;
-webkit-border-radius: 20px;
}
2.2 为什么要有私有前缀
W3C标准所提出的某个CSS特性,在被浏览器正式支持之前,浏览器厂商会根据浏览器的内核, 使用私有前缀来测试该CSS特性,在浏览器正式支持该CSS特性后,就不需要私有前缀了。- 举个例子:
div {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
}
- 查询
CSS3兼容性的网站: caniuse.com/
2.3 常见浏览器私有前缀
Chrome浏览器:-webkit-Safari浏览器:-webkit-Firefox浏览器:-moz-Edge浏览器:-webkit-- 旧
Opera浏览器:-o- - 旧
IE浏览器:-ms-
⚠注意
我们在编码时,不用过于关注浏览器私有前缀,不用绞尽脑汁的去记忆,也不用每个都去查询,因 为常用的
CSS3新特性,主流浏览器都是支持的,即便是为了老浏览器而加前缀,我们也可以借助 现代的构建工具,去帮我们添加私有前缀。