了解对CSS3的主要更改
CSS2和CSS3最大的不同之处在于CSS3被分成不同的部分，称为模块。 这些模块中的每一个都在推荐过程的各个阶段通过W3C。 这个过程使不同的制造商能够在浏览器中接受并实现各种CSS3。
如果您将此过程与CSS2发生的情况进行比较，那么所有内容都作为单个文档提交，其中包含所有层叠样式表信息，您将开始看到将建议分成更小，单独的部分的优势。 由于每个模块都是单独运行的，因此我们对CSS3模块的浏览器支持范围更广。
就像任何新的和不断变化的规范一样，一定要尽可能在尽可能多的浏览器和操作系统中彻底测试CSS3页面。 请记住，目标不是创建在每个浏览器中完全一样的网页，而是要确保您使用的任何样式（包括CSS3样式）在支持它们的浏览器中看起来都很棒，而且它们适合旧式浏览器不要。
新的CSS3选择器
CSS3提供了一系列新的方法，您可以使用新的CSS选择器来编写CSS规则，以及一个新的组合器和一些新的伪元素。
三个新的属性选择器：
- 属性开始匹配元素[foo ^ =“bar”]该元素有一个名为foo的属性，以“bar”开头，例如
- 属性结尾完全匹配元素[foo $ =“bar”]元素有一个名为foo的属性，以“bar”结尾，例如
- 属性包含匹配元素[foo * =“bar”]该元素具有名为foo的属性，其中包含字符串“bar”，例如
16个新的伪类：
- ：根
- 文档的根元素。 在HTML中，这总是。
- ：第n个孩子（N）
- 使用它来匹配确切的子元素或使用变量来获得交替匹配。
- ：第n-最后一子（N）
- 匹配从最后一个开始计算的准确子元素。
- ：第n-的型（n）
- 在文档树中匹配具有相同名称的同级元素。
- ：第n-最后的型（n）
- 将兄弟元素与底部的相同名称进行匹配。
- ：最后一个孩子
- 匹配父级的最后一个子元素。
- ：第一型的
- 匹配该类型的第一个兄弟元素。
- ：式中最后
- 匹配该类型的最后一个兄弟元素。
- ：唯一的孩子
- 匹配它父项的唯一子元素。
- ：只有-型
- 匹配它的唯一类型的元素。
- ：空
- 匹配没有子项的元素（包括文本节点）。
- ：目标
- 匹配作为引用URI目标的元素。
- ：启用
- 匹配启用时的元素。
- ：禁用
- 禁用时匹配元素。
- ：检查
- 选中时匹配元素（单选按钮或复选框）。
- ：没有（S）
- 当元素与简单选择符不匹配时匹配。
一个新的组合器：
- elementA〜elementB
- 元素B在元素A后面的某处跟随匹配，不一定立即匹配。
新的属性
CSS3还引入了一些新的CSS属性。 这些属性中的很多都是为了创建视觉样式，这些样式可能会更多地与Photoshop等图形程序相关联。 自引入CSS3以来，其中一些像border-radius或box-shadow一样。 其他人，比如flexbox甚至CSS Grid都是更新的样式，这些样式仍然被认为是CSS3的补充。
在CSS3中，框模型没有改变。 但是有一些新的样式属性可以帮助您设计箱子的背景和边框。
多个背景I法师
使用背景图像，背景位置和背景重复样式，您可以指定多个背景图像在框中彼此重叠。 第一个图像是最接近用户的图层，后面绘制了下图。 如果存在背景色，则将其绘制在所有图像层下。
新的背景样式属性
CSS3中还有一些新的背景属性。
- 背景素材
- 这个属性定义了如何裁剪背景图片。 默认值是边框，但可以更改为填充框或内容框。
- 背景起源
- 该属性确定背景是否应放置在填充框，边框或内容框中。
- 背景大小
- 该属性允许您指定背景图像的大小。 它允许您展开较小的图像以适应页面。
对现有背景样式属性的更改
现有的背景样式属性也有一些变化：
- 背景重复
- 这个属性有两个新的值：空间和轮。 空间将平铺的图像均匀分布在框中，而不会被剪裁。 圆形将重新调整背景图像的大小，以便它在框中平铺多次。
- 背景附件
- 添加一个新的“本地”值，以便当该元素具有滚动条时，背景将随元素内容一起滚动。
- 背景
- 背景速记属性添加了大小和原始属性。
CSS3边框属性
在CSS3中，边框可以是我们习惯的样式（实体，双层，虚线等），也可以是图像。 另外，CSS3还可以创建圆角。 边框图像很有趣，因为您可以创建所有四个边框的图像，然后告诉CSS如何将该图像应用到边框。
新的边框样式属性
CSS3中有一些新的边框属性：
- 边界半径
- 边界右上半径 ， 边界右下半径 ， 边界左下半径 ， 边界左上半径
- 这些属性允许您在边框上创建圆角。
- 边界图像源
- 指定要使用的图像源文件，而不是已定义的边框样式。
- 边界图像切片
- 表示边界图像边缘的内部偏移量
- 边界图像宽度
- 定义边框图像的宽度值。
- 边界图像开始
- 指定边框图像区域超出边框的数量。
- 边界图像拉伸
- 定义如何平铺或缩放边框图像的边和中间部分。
- 边框，图像
- 所有边框图像属性的简写属性。
与边框和背景相关的其他CSS3属性
当在分页符处打开一个框时，换行分隔符（对于内联元素），box-decoration-break属性定义了如何使用边框和填充来包装新框。 使用此属性可将背景分成多个破损的框。
还有一个box-shadow属性，可以用来为box元素添加阴影。
使用CSS3，您现在可以轻松地设置具有多个列的网页，而无需表格或复杂的div标签结构。 您只需告诉浏览器body元素应该有多少列以及它们应该有多宽。 另外，您可以添加边框（规则），跨越列高度的背景颜色，并且文本将自动流过所有列。
CSS3列 - 定义列的数量和宽度
有三个新属性允许您定义列的数量和宽度：
- 列宽
- 定义你的列的宽度。 然后，浏览器将流动文本以填充宽广的列。
- 列数
- 定义页面上的列数。 然后，浏览器将创建足够宽的列以适应空间，但仅限您指定的数字。
- 列
- 速记属性，您可以定义宽度或数字（或两者，但很少有意义）。
CSS3栏目差距和规则
间隔和规则放置在同一多栏场景中的列之间。 差距会推开列，但规则不占用任何空间。 如果列规则比间隙宽，则它将与相邻列重叠。 列规则和差距有五个新属性：
- 柱隙
- 定义列之间的间距的宽度。
- 列治色
- 定义规则的颜色。
- 列规则式
- 定义规则的样式（实体，虚线，双等等）。
- 列规则宽度
- 定义规则的宽度。
- 列治
- 速记属性一次定义全部三个列规则属性。
CSS3列中断，跨越列和填充列
分栏符使用相同的CSS2选项来定义分页内容中的分隔符，但有三个新属性：分隔符，分隔符和分隔符。
与表格一样，您可以将元素设置为使用column-span属性跨越列。 这使您可以创建跨多列的标题，更像报纸。
填充列决定每列中将包含多少内容。 平衡列尝试在每列中放入相同数量的内容，而自动只传递内容直到列满，然后转到下一个列。
CSS3中包含更多的功能，不包含在CSS2中
CSS3中有很多附加功能在CSS2中不存在，其中包括：
- CSS模板布局模块和CSS3网格定位模块 ：使用CSS创建网格。
- CSS3文本模块 ：轮廓文本，甚至用CSS创建阴影。
- CSS3颜色模块 ：现在不透明。
- 对框模型的更改 ：包括一个类似IE标记的选取框属性。
- CSS3用户界面模块 ：为您提供新的游标，对操作的响应，必填字段以及调整元素大小 。
- 媒体查询 ：在定义如何使用样式表时，媒体查询可以让您更加灵活。 例如，您可以定义仅适用于视口大于20em的手持设备的样式表。
- CSS3 Ruby模块 ：为使用文本ruby注释文档的语言提供支持。
- CSS3分页式媒体模块 ：为分页媒体（纸张，透明胶片等）提供更多支持。
- 生成的内容 ：L运行页眉和页脚，脚注以及以编程方式生成的其他内容，尤其是分页媒体。
- CSS3语音模块 ：改变听觉CSS。