CSS3 新特性

1. 选择器增强

• 属性选择器：[attr^=value]（以指定值开头）、[attr$=value]（以指定值结尾）、[attr*=value]（包含指定值）
• 伪类选择器：:nth-child(n)、:nth-of-type(n)、:first-of-type、:last-of-type、:not(selector)
• 伪元素选择器：::before、::after、::first-letter、::first-line

2. 盒模型与布局

• box-sizing：控制盒模型计算方式（content-box/border-box）
• flexbox：弹性布局，通过 display: flex 实现灵活的一维布局
• grid：网格布局，通过 display: grid 实现二维布局
• 多列布局：column-count、column-gap、column-rule 等属性实现多列文本排版

3. 背景与边框

• 背景增强：background-size（控制背景图片大小）、background-position（精确控制背景位置）、background-attachment（背景固定方式）、background-origin（背景起始位置）
• 多背景：支持在一个元素上设置多个背景图片
• 边框增强：border-radius（圆角边框）、border-image（图片边框）、box-shadow（盒阴影）

4. 文本效果

• 文本阴影：text-shadow（为文本添加阴影）
• 文本溢出：text-overflow（控制文本溢出时的显示方式）
• 文本换行：word-wrap、word-break（控制文本换行行为）
• 字体增强：@font-face（引入自定义字体）、font-size-adjust（字体大小调整）

5. 2D/3D 变换

• 2D 变换：transform 属性支持 translate()、rotate()、scale()、skew() 等变换
• 3D 变换：transform 属性结合 perspective、transform-style: preserve-3d 实现 3D 效果

6. 动画与过渡

• 过渡：transition 属性实现元素状态变化时的平滑过渡
• 动画：@keyframes 定义动画，animation 属性应用动画
• 缓动函数：transition-timing-function 和 animation-timing-function 控制动画速度曲线

7. 颜色与透明度

• RGBA/HSLA 颜色：支持带透明度的颜色表示
• opacity：控制元素整体透明度

8. 用户界面

• resize：允许用户调整元素大小
• outline：控制元素轮廓样式
• cursor：自定义光标样式
• user-select：控制用户是否可以选择文本

9. 媒体查询

• @media：根据设备特性（如屏幕宽度、高度、方向等）应用不同的样式，实现响应式设计

10. 其他特性

• 变量：--variable-name 定义 CSS 变量，通过 var(--variable-name) 使用
• 计算函数：calc() 允许在 CSS 中进行数学计算
• 过滤效果：filter 属性实现模糊、亮度、对比度等效果
• 混合模式：mix-blend-mode 控制元素与背景的混合方式