1. CSS3 概述

CSS3 是 Cascading Style Sheets 的第三个主要版本，是对传统 CSS 标准的重大升级。

1.1 模块化结构

1）将庞大复杂的规范划分为多个独立模块。

2）包括选择器模块（Selectors Level 3）、盒模型模块（Flexbox/Grid）、背景与边框模块（圆角、阴影）、文字特效模块（text-shadow）等。

3）各模块可独立开发和更新，提高了标准演进效率。

1.2 向后兼容性

1）设计理念强调向下兼容。

2）新特性会优雅降级，不影响旧浏览器显示基本样式。

3）采用渐进增强（Progressive Enhancement）策略。

1.3 丰富的视觉效果和动画功能

1）过渡（Transition）：实现属性变化的平滑过渡效果。

2）变换（Transform）：支持2D/3D旋转、缩放、位移等效果。

3）动画（Animation）：通过关键帧控制复杂动画序列。

4）新增滤镜（Filter）、混合模式（Blend Mode）等特效。

5）典型应用：悬停效果、轮播图、加载动画等。

1.4 响应式设计支持

1）媒体查询（Media Queries）实现设备适配。

2）弹性盒布局（Flexbox）和栅格布局（Grid）提供灵活的页面排版。

3）视口单位（vw/vh）实现比例缩放。

4）典型应用：跨设备网页、移动优先设计、自适应UI等。

1.5 其他

1）多列布局（Multi-column）。

2）自定义字体（@font-face）。

3）变量（CSS Variables）。

4）计算函数（calc()）。

5）形状绘制（clip-path）等创新功能。

2. 选择器增强

2.1 属性选择器

/* 属性值匹配 */
input[type="text"] { /* 精确匹配 */ }
a[href*="example"] { /* 包含指定值 */ }
a[href^="https"] { /* 以指定值开头 */ }
a[href$=".pdf"] { /* 以指定值结尾 */ }
div[class~="box"] { /* 包含指定单词（空格分隔） */ }
div[class|="nav"] { /* 以指定值开头或后面跟连字符 */ }

2.2 结构伪类选择器

/* 子元素选择 */
:first-child :last-child :only-child
:nth-child(n) :nth-last-child(n)
:nth-of-type(n) :nth-last-of-type(n)
:first-of-type :last-of-type :only-of-type
/* 示例 */
li:nth-child(2n) { /* 偶数行 */ }
tr:nth-child(odd) { /* 奇数行 */ }
p:first-of-type { /* 同类型第一个 */ }

2.3 UI 元素状态伪类

:enabled :disabled :checked
:required :optional :valid :invalid
:in-range :out-of-range
:read-only :read-write
/* 示例 */
input:valid { border-color: green; }
input:invalid { border-color: red; }

2.4 其他新伪类

:root { /* 文档根元素 */ }
:empty { /* 没有子元素的元素 */ }
:target { /* 当前活动的锚点目标 */ }
:not(selector) { /* 否定伪类 */ }
/* 示例 */
div:not(.special) { opacity: 0.8; }

3. 盒模型增强

3.1 box-sizing

/* 内容盒模型（默认） */
box-sizing: content-box; /* width/height = 内容宽度 */
/* 边框盒模型 */
box-sizing: border-box; /* width/height = 内容+padding+border */

3.2 圆角边框 (border-radius)

/* 基本用法 */
border-radius: 10px;
border-radius: 10px 20px 30px 40px; /* 左上 右上 右下 左下 */