CSS3是层叠样式表技术的重大升级，它将原本单一的规范拆分为多个独立模块，分别定义了不同的能力。相比CSS2，CSS3在视觉表现、布局控制和交互体验上都有明显增强。下面我们来系统梳理前端开发中常用的CSS3新特性。
一、视觉表现类新特性
1. 圆角与阴影
通过border-radius可以快速实现圆角，box-shadow为元素添加阴影，无需切图。
/* 圆角与阴影示例 */
.card {
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
2. 渐变与滤镜
CSS3支持线性渐变和径向渐变，也可以使用filter属性对元素应用模糊、灰度等滤镜效果。
/* 渐变背景与滤镜 */
.banner {
background: linear-gradient(to right, #4facfe, #00f2fe);
filter: grayscale(50%);
}
二、布局类新特性
1. 弹性盒布局
弹性盒布局（Flexbox）通过display: flex定义容器，能轻松实现居中、等分和自适应排列。
/* 弹性盒布局示例 */
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
2. 网格布局
网格布局（Grid）适合二维排版，可同时控制行与列，解决传统浮动布局的缺陷。
/* 网格布局示例 */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
三、交互与响应式新特性
1. 过渡与动画
transition用于状态切换时的平滑过渡，@keyframes配合animation可实现复杂动画。
/* 过渡与动画 */
.btn {
transition: background 0.3s ease;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
2. 媒体查询
媒体查询是响应式设计核心，能根据视口宽度应用不同样式。
/* 媒体查询示例 */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
四、其他实用特性
- 自定义字体：通过
@font-face引入外部字体文件。 - 多列布局：使用
column-count让文本分栏显示。 - 盒子模型优化：
box-sizing: border-box让尺寸计算更直观。
以上这些CSS3新特性覆盖了样式开发的主要场景。合理运用它们，可以减少对图片和脚本的依赖，让页面更轻量、易维护，也能更好地适配不同设备。