CSS3概述 - 小璇妙妙屋

1.1 CSS3 的新特性

新增了更加实用的选择器，例如：动态伪类选择器、目标伪类选择器、伪元素选择器等等。

新增了更好的视觉效果，例如：圆角、阴影、渐变等。

新增了丰富的背景效果，例如：支持多个背景图片，同时新增了若干个背景相关的属性。

新增了全新的布局方案 —— 弹性盒子。

新增了 Web 字体，可以显示用户电脑上没有安装的字体。

增强了颜色，例如： HSL 、 HSLA 、 RGBA 几种新的颜色模式，新增 opacity 属性来控制

透明度。

增加了 2D 和 3D 变换，例如：旋转、扭曲、缩放、位移等。

增加动画与过渡效果，让效果的变换更具流线性、平滑性。

如下代码中的 -webkit- 就是私有前缀

div {
  width:400px;
  height:400px;
  -webkit-border-radius: 20px;
}

W3C 标准所提出的某个 CSS 特性，在被浏览器正式支持之前，浏览器厂商会根据浏览器的内核，

使用私有前缀来测试该 CSS 特性，在浏览器正式支持该 CSS 特性后，就不需要私有前缀了。

举个例子：

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;

查询 CSS3 兼容性的网站：https://caniuse.com/

Chrome 浏览器： -webkit-

Safari 浏览器： -webkit-

Firefox 浏览器： -moz-

Edge 浏览器： -webkit-

旧 Opera 浏览器： -o-

旧 IE 浏览器： -ms-

注意：

我们在编码时，不用过于关注浏览器私有前缀，不用绞尽脑汁的去记忆，也不用每个都去查询，因

为常用的 CSS3 新特性，主流浏览器都是支持的，即便是为了老浏览器而加前缀，我们也可以借助

现代的构建工具，去帮我们添加私有前缀。