CSS3（层叠样式表第3版）与CSS2相比，在功能、特性和语法上都有显著的进步。CSS3引入了许多新的特性，使得Web设计师和开发者能够创建更加丰富、动态和交互性强的网页。以下是CSS3与CSS2之间的一些主要区别及其底层原理。
主要区别
1. 选择器增强
- CSS3：增加了许多新的选择器，如伪类（
:nth-child,:not）和伪元素（::before,::after），使得选择元素变得更加灵活和强大。 - CSS2：选择器相对较少，仅支持基本的选择器和简单的伪类（如
:hover,:focus）。
2. 字体与文本
- CSS3：支持
@font-face规则，允许网站使用自定义字体；引入了文字阴影（text-shadow）属性。 - CSS2：不支持
@font-face，只能使用系统自带的字体；没有文字阴影属性。
3. 背景与边框
- CSS3：支持圆角边框（
border-radius）、多重背景（background-image）、渐变（gradient）、阴影（box-shadow）等。 - CSS2：只支持简单的背景颜色或图片，没有圆角、渐变或阴影等效果。
4. 过渡与动画
- CSS3：引入了过渡（
transition）和动画（animation）属性，使得元素可以平滑地改变样式。 - CSS2：没有过渡和动画属性，无法直接在 CSS 中实现动画效果。
5. 多列布局
- CSS3：支持多列布局（
column-count,column-gap,column-rule），使得创建报纸样式的布局更加容易。 - CSS2：没有多列布局相关的属性，需要使用其他技术（如浮动）来模拟多列布局。
6. 媒体查询
- CSS3：引入了媒体查询（
@media），可以根据不同的设备类型（如桌面、平板、手机）来应用不同的样式。 - CSS2：没有媒体查询功能，样式表通常需要根据设备手动调整。
7. 网格布局
- CSS3：支持网格布局（
grid），使得创建复杂的布局更加容易。 - CSS2：没有网格布局相关的属性，需要使用表格或浮动等技术来创建网格布局。
8. 弹性盒子
- CSS3：引入了弹性盒子（
flexbox），使得创建响应式布局变得更加简单。 - CSS2：没有弹性盒子，需要使用浮动或绝对定位等技术来创建响应式布局。
底层原理
1. 选择器
- 底层原理：选择器的工作机制是通过解析文档树结构来匹配相应的元素。CSS3 选择器增强了这种匹配能力，使得选择更加精确和灵活。
2. 字体与文本
- 底层原理：
@font-face规则通过定义字体文件路径和格式来加载自定义字体。文字阴影则是通过在文字后面绘制一个偏移的透明副本实现。
3. 背景与边框
- 底层原理：圆角边框通过绘制四个圆角图形来实现；渐变通过创建渐变颜色的图像来实现；阴影通过绘制带有模糊效果的偏移图像来实现。
4. 过渡与动画
- 底层原理：过渡通过在两个关键帧之间插值来实现平滑变化；动画则是通过定义一系列关键帧并在一定时间内播放来实现动画效果。
5. 多列布局
- 底层原理：多列布局通过将内容流分成多列并控制列之间的间距来实现。
6. 媒体查询
- 底层原理：媒体查询通过检测设备的特性（如屏幕宽度、分辨率）来应用相应的样式表。
7. 网格布局
- 底层原理：网格布局通过定义网格线、网格轨道和网格项的位置来创建复杂的布局。
8. 弹性盒子
- 底层原理：弹性盒子通过定义主轴和交叉轴来控制子项的排列方式，使得布局更加灵活和响应式。
总结
CSS3 相对于 CSS2 在功能和特性方面有了显著的提升，使得 Web 设计师和开发者能够创建更加丰富、动态和交互性强的网页。CSS3 新增的选择器、字体、背景、过渡、动画、多列布局、媒体查询、网格布局和弹性盒子等功能，大大增强了 CSS 的表现力和实用性。
通过这些新特性的底层原理，我们可以更好地理解和运用 CSS3，创造出更加美观和实用的网页设计。
