一、CSS3 新特性整体分类
CSS3 主要新增了 8 大类能力：
1. 选择器增强
2. 盒模型增强
3. 圆角 / 阴影
4. 背景与边框增强
5. 渐变
6. 2D/3D 变换
7. 过渡
8. 动画
9. 多列布局
10. Flex 布局
二、常见高频 CSS3 新特性
1️⃣ 新增选择器（非常常考）
属性选择器增强
input[type="text"]
a[target="_blank"]
结构伪类
li:first-child
li:last-child
li:nth-child(2)
li:nth-of-type(odd)
否定选择器
div:not(.active)
伪元素（双冒号）
::before
::after
::selection
2️⃣ 圆角（border-radius）
box {
border-radius: 10px;
}
支持：
- 单角设置
- 圆形（50%）
3️⃣ 盒阴影 & 文字阴影
box-shadow: 0 0 10px #000;
text-shadow: 2px 2px 5px gray;
4️⃣ 背景增强
多背景
background: url(a.png), url(b.png);
背景尺寸
background-size: cover;
background-size: contain;
5️⃣ 渐变（Gradient）
线性渐变
background: linear-gradient(red, blue);
径向渐变
background: radial-gradient(circle, red, blue);
6️⃣ 2D 变换（transform）
transform: translate();
transform: rotate();
transform: scale();
transform: skew();
7️⃣ 3D 变换
transform: rotateX();
transform: rotateY();
transform: translateZ();
perspective: 1000px;
8️⃣ 过渡（transition）
transition: all 0.3s ease;
让属性变化有动画效果。
9️⃣ 动画（animation + @keyframes）
@keyframes move {
from { left: 0; }
to { left: 100px; }
}
.box {
animation: move 1s infinite;
}
🔟 Flex 布局 ⭐⭐⭐（非常重要）
display: flex;
justify-content: center;
align-items: center;
解决传统浮动布局难题。
1️⃣1️⃣ 多列布局
column-count: 3;
column-gap: 20px;
三、面试回答模板（推荐说法）
你可以这样回答：
CSS3 新特性主要包括选择器增强、圆角与阴影、渐变、背景增强、2D/3D 变换、过渡、动画以及 Flex 布局等。其中在实际开发中用得最多的是 flex 布局、transform、transition 和 animation。
四、进阶加分点（你可以说）
1️⃣ CSS3 模块化
CSS3 不是一个整体版本，而是拆分成多个模块：
- Selectors Level 3
- Transforms
- Animations
- Flexbox
- Backgrounds & Borders
2️⃣ 性能优势
CSS3 动画：
优于 JS 动画
因为可以触发 GPU 加速（transform / opacity）
五、结合你实际开发（后台系统 / 性能平台）
在你的 React / Ant Design 项目中，常用的 CSS3：
- flex 布局
- transform 居中
- transition hover 效果
- box-shadow 卡片阴影
- border-radius 卡片圆角
- ECharts 动画
六、一句话总结
CSS3 的核心提升是：增强选择器、增强视觉效果、支持动画、提供现代布局（Flex）
