CSS3是层叠样式表（Cascading Style Sheets）规范的第三个主要版本，用于描述HTML或XML文档在屏幕、纸张等媒介上的呈现方式。它并不是一种全新的语言，而是对早期CSS标准的扩展与增强，将许多原本需要图片或脚本才能实现的效果变成了原生样式能力。
CSS3与之前版本的关系
CSS1定义了基础排版属性，CSS2.1完善了盒模型与定位机制，而CSS3最大的变化是采用了模块化（Modules）的设计思路。过去CSS是一整份规范，浏览器要么整体支持要么不支持；CSS3把功能拆成独立模块，例如选择器、背景与边框、文本效果、变换、过渡、动画等，每个模块有自己的编辑状态和浏览器支持节奏。
这种模块化让新特性可以更快落地。比如圆角边框模块很早就得到了广泛支持，而某些高级布局模块则经历了较长时间的草案阶段。对开发者来说，理解CSS3是“一系列模块的集合”比把它看成一个单一版本更重要，这决定了我们写样式时如何查兼容性以及何时使用前缀。
核心新特性一览
CSS3引入了大量实用功能。以视觉表现类为例，border-radius可画圆角，box-shadow加阴影，linear-gradient做渐变背景。以布局类为例，Flexbox和Grid让复杂排版不再依赖浮动与清除浮动。以交互类为例，transition与animation能用纯CSS实现平滑过渡与关键帧动画。
下面是一段使用CSS3常见特性的代码示例，展示了圆角、阴影与过渡效果：
/* 定义一个卡片样式，使用CSS3圆角、阴影与过渡 */
.card {
width: 300px;
padding: 20px;
border-radius: 12px; /* CSS3圆角 */
box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* CSS3阴影 */
background: #ffffff;
transition: transform 0.3s ease; /* CSS3过渡 */
}
.card:hover {
transform: translateY(-6px); /* 悬停时上移 */
}
选择器与媒体查询的增强
CSS3扩展了选择器能力，例如属性选择器[data-type="primary"]、结构伪类:nth-child()、状态伪类:disabled等，让样式命中更精准，减少额外class的堆砌。媒体查询（Media Queries）则是响应式设计的基石，它允许根据视口宽度、设备方向等条件切换样式。
以下代码展示了如何用媒体查询让容器在窄屏下变为单列：
.container {
display: flex;
gap: 16px;
}
/* 视口宽度小于600px时改为纵向排列 */
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
浏览器兼容与厂商前缀
在CSS3模块推进过程中，浏览器曾用带前缀的属性做实验性实现，例如-webkit-border-radius、-moz-border-radius。现在主流特性已去前缀，但写组件库时仍可能见到兼容性写法。推荐用Autoprefixer等工具自动补全，而不是手工维护前缀列表。
判断某项CSS3特性能否使用，可查阅兼容性数据表或做特性检测。对于不支持的旧环境，应准备优雅降级方案，例如渐变不可用时回退到纯色背景，动画不可用时保证内容静态可读。下表列出几个常见模块的支持成熟度：
| 模块 | 典型属性 | 支持情况 |
|---|---|---|
| 背景与边框 | border-radius, box-shadow | 所有现代浏览器稳定支持 |
| 变换与过渡 | transform, transition | 广泛支持，旧版IE需降级 |
| 弹性盒布局 | display: flex | 现代浏览器支持良好 |
| 网格布局 | display: grid | 近年起全面支持 |
为什么前端必须掌握CSS3
现代前端开发中，结构与样式分离是基本原则。CSS3把表现层的能力提升到接近设计稿还原的程度，减少切图与脚本辅助，既降低维护成本也提升渲染性能。掌握它能让你用更少代码写出适配多端的界面，并为后续学习预处理器、CSS-in-JS等方案打下基础。
从工程角度看，CSS3配合语义化HTML可显著提升可访问性与SEO表现。比如用<nav>配合Flexbox排版，比用表格嵌套更利于屏幕阅读器解析。理解CSS3的层叠与优先级规则，也能避免样式冲突导致的诡异bug，是前端进阶的必经之路。