虽然已经是2020年了，但市场上主要使用的是CSS2和CSS3的API。 至于CSS3的新特性，我给大家总结一下：
选择器
CSS3中添加了很多新的选择器，解决了很多之前需要解决的布局问题。
~：选择前面有一个元素的每个元素。 [^=value]：选择属性以value开头的元素。 [$=value]：选择属性以value结尾的元素。 [*=value]：选择属性包含值字符串的元素。 E:first-of-type：选择作为其父元素的第一个 E 元素的每个 E 元素。 E:last-of-type：选择作为其父元素的最后一个 E 元素的每个 E 元素。 E:only-of-type：选择作为其父元素的唯一 E 元素的每个 E 元素。 E:only-child：选择作为其父元素的唯一子元素的每个 E 元素。 E:nth-child(n)：选择作为其父元素的第 n 个子元素的每个 E 元素。 E:nth-last-child(n)：选择每个 E 元素，即从其父元素底部算起的第 n 个子元素。 E:nth-of-type(n)：选择属于其父元素的第 n 个 E 元素的每个 E 元素。 E:nth-last-of-type(n)：选择从其父元素的最后一个元素算起的第 n 个 E 元素的每个 E 元素。 E:last-child：选择作为其父元素的最后一个子元素的每个 E 元素。 :root：选择文档的根元素。 E:empty：选择没有子元素的每个E元素（包括文本节点）。 E:: 选择当前活动的 E 元素。 E:: 选择每个启用的 E 元素。 E:: 选择每个禁用的 E 元素。 E:: 选择每个选定的 E 元素。 E:not()：选择所有不是元素的元素。 E::: 选择用户选择的元素部分。 ，和
这三个特性是CSS3新的与动画相关的特性。
当元素从一种样式转换为另一种样式时，您可以向元素添加效果，而无需使用 Flash 动画或 .
具有以下特性：
-：指定应用过渡的 CSS 属性的名称。 -：指定完成过渡效果需要多长时间。 -delay：指定转场效果何时开始，默认为0。 --：指定转场效果的时间曲线。 默认为“轻松”。 还有过渡类型，例如缓入、缓出、缓入和立方。 ：在一个属性中设置四个过渡属性的简写属性。
用于对元素应用各种 2D 和 3D 变换。 该属性允许我们旋转、缩放、移动或倾斜元素。
改造类型
可以有多种类型的转换，即属性值：
none：定义不执行转换。 (n,n,n,n,n,n)：使用六个值的矩阵定义 2D 变换。 (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)：使用 16 个值的 4x4 矩阵定义 3D 变换。 (x,y)：定义 2D 位移变换。 (x,y,z)：定义 3D 位移变换。 (x)：定义位移变换，仅使用X轴的值。 (y)：定义位移变换，仅使用Y轴的值。 (z)：定义3D位移变换，仅使用Z轴的值。 scale(x,y)：定义 2D 缩放变换。 (x,y,z)：定义 3D 缩放变换。 (x)：通过设置X轴的值来定义缩放变换。 (y)：通过设置Y轴的值来定义缩放变换。 (z)：通过设置Z轴的值来定义3D缩放变换。 (angle)：定义2D旋转，在参数中指定角度。 (x,y,z,angle)：定义 3D 旋转。 （角度）：定义沿 X 轴的 3D 旋转。 （角度）：定义沿 Y 轴的 3D 旋转。 （角度）：定义沿 Z 轴的 3D 旋转。 skew(x-angle,y-angle)：定义沿 X 轴和 Y 轴的 2D 倾斜变换。 skewX(angle)：定义沿 X 轴的 2D 倾斜变换。 skewY(angle)：定义沿 Y 轴的 2D 倾斜变换。 (n): 定义 3D 变换元素的透视图。浏览器支持
10. Opera支持属性。
9 支持替代 -ms- 属性（仅适用于 2D 转换）。
并支持替代属性（3D 和 2D 转换）。
Opera 仅支持 2D 转换。
让CSS具备制作动画的功能。 使用CSS3创建动画我们可以节省复杂的js代码。
框架
CSS3添加了三个新的边框属性，即-、box-和-image。 - 可以创建圆形边框，box- 可以给元素添加阴影，-image 可以使用图片来绘制边框。 IE9+ 支持 - 和 box- 属性。 ，并支持所有新的边框属性。
背景
CSS3 添加了几个新的背景属性，即 -clip、-、-size 和 -break。
-夹子
-clip属性用于确定背景绘制区域。 有几种可能的属性：
通常，背景覆盖整个元素。 您可以使用此属性来设置图像的背景颜色或覆盖范围。
-
-clip 属性用于确定背景的位置。 它通常与 - 结合使用，并且可以根据 、 和 - 计算（就像 -clip 一样）。
-尺寸
-size属性常用于调整背景图片的大小，主要用于设置图片本身。 有以下可能的属性：
-休息
在CSS3中，元素可以被分成几个独立的盒子（比如让内联元素跨越多行），-break属性用于控制背景如何在这些不同的盒子中显示。
文字效果自动换行
在 CSS3 中，word-wrap 属性允许您允许文本强制文本换行，这意味着单词将被拆分。 所有主流浏览器都支持自动换行属性。
123
p { 自动换行：换行；}
文本-
与word-wrap配合使用，word-wrap设置或获取当前行超出指定容器的边界时是否换行，text-设置或获取当前行超出指定容器的边界时如何显示容器。 对于“text-”属性，有两个选项：“clip”和“”。
文本-
在CSS3中，text-可以对文本应用阴影。 能够指定水平阴影、垂直阴影、模糊距离和阴影颜色。
123
h1{ 文本-: 5px 5px 5px #;}
文本-
CSS3 开始支持更深层次的文本渲染。 共有三个属性可供设置：
text-fill-color：设置文本内部填充颜色 text--color：设置文本边界填充颜色 text--width：设置文本边界宽度渐变
CSS3添加了新的渐变效果，包括-（线性渐变）和-（径向渐变）。 具体使用参考教程：CSS3
@font-face 属性
在 CSS3 之前，网页设计人员必须使用用户计算机上已安装的字体。 借助 CSS3，网页设计师可以使用他们喜欢的任何字体。 当您找到或购买想要使用的字体时，您可以将该字体文件存储在网络服务器上，并在需要时自动下载到用户的计算机上。 字体在 CSS3 @font-face 规则中定义。 、、和 Opera 支持 .ttf（True Type Fonts）和 .otf（Fonts）类型字体。 IE9+ 支持新的 @font-face 规则，但仅支持 .eot 类型字体 ( )。
在新的@font-face规则中，您必须首先定义字体的名称（例如），然后指向字体文件。
要为 HTML 元素使用字体，请通过 font-() 引用字体名称
@font-face { 字体-: ; src: url('.ttf'), url('.eot'); /* IE9+ */}div{ font-:;}
多列布局
通过CSS3，可以创建多列来布局文本。 IE10和Opera支持多列属性。 需要前缀 -moz-，并且需要前缀 --。 主要有三个属性：
-count：指定元素分隔的列数。 -gap：指定列之间的间隙。 -rule：设置列用户界面之间的宽度、样式和颜色规则
在 CSS3 中，新的用户界面功能包括调整元素大小、框大小和轮廓。 ，以及支持属性。 IE、 和 Opera 支持 box-属性。 需要前缀 -moz-。
除 IE 外，所有主流浏览器都支持 - 属性。
属性指定用户是否可以调整元素的大小。 如果想让该属性生效，需要设置该元素的属性。 该值可以是 auto，或者。
1234
div{：两者； /* 无|两者||; */ ：汽车;}
盒子-
box- 可以设置为值-box、-box 和。
-box：不包含在定义的宽度和总和中。 对象的实际宽度等于设置的宽度值与 之和，即(width = width + +)。 此属性的行为类似于标准模式下的盒模型。 -box： 和 包含在定义的宽度和总和内。 对象的实际宽度等于设置的宽度值。 即使定义了sum，对象的实际宽度也不会改变，即(width = width)。 该属性的行为类似于怪异模式下的盒模型。 -
- 偏移轮廓并绘制超出边框边缘的轮廓。
