CSS3：模块化、响应式与视觉表达

参考官方标准：W3C CSS Snapshot
CSS3 之后不再以单体版本发布，具体能力应按各模块的规范状态与浏览器实现核对。

CSS3 不是一个像 HTML5 那样一次发布的单体版本。庞大的 CSS2 后续工作被拆成 Selectors、Media Queries、Backgrounds and Borders、Transforms、Animations、Flexbox 等模块，各模块独立升级成熟度。

1. 媒体查询与响应式设计

.layout { padding: 1rem; }

@media (min-width: 48rem) {
  .layout {
    display: flex;
    gap: 2rem;
  }
  .sidebar { flex: 0 0 16rem; }
  .content { flex: 1; }
}

移动优先意味着基础规则先满足窄屏，再通过 min-width 增强宽屏布局。断点应由内容何时拥挤决定，而不是绑定某个设备型号。

2. 圆角、阴影、渐变与多背景

.hero-card {
  border-radius: 1rem;
  background:
    linear-gradient(135deg, rgb(37 99 235 / 90%), rgb(124 58 237 / 90%)),
    url('/pattern.svg');
  box-shadow: 0 1rem 2.5rem rgb(15 23 42 / 18%);
}

过去需要切图的常见视觉效果可以直接由 CSS 描述，并随分辨率和尺寸无损适配。

3. Transform、Transition 与 Animation

.card {
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgb(15 23 42 / 20%);
}

@keyframes enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

动画应服务于状态解释和空间关系。为 prefers-reduced-motion: reduce 提供弱化或关闭方案。

4. Flexbox：真正的一维布局系统

.toolbar {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.toolbar .search { flex: 1 1 18rem; }
.toolbar .actions { margin-inline-start: auto; }

Flexbox 解决主轴空间分配、交叉轴对齐、换行和顺序问题，特别适合工具栏、导航、表单行和卡片内部结构。

5. 选择器和结构表达增强

CSS3 选择器普及了属性选择器、结构伪类和状态伪类：

input[type="email"]:invalid { border-color: #dc2626; }
.result:nth-child(odd) { background: #f8fafc; }
.menu a:not([aria-current="page"]):hover { text-decoration: underline; }

6. 从 CSS3 走向现代 CSS

Grid 虽然常被口语归入“CSS3”，但现代 CSS 已经不适合用单一 CSS3 标签概括。后续模块继续加入 Grid、变量、逻辑属性、级联层、容器查询与父级选择器等能力。

下一阶段：现代 CSS 平台能力。

版本信息与迁移

• 发布时间 / 标准时间： 2011 年起按独立模块持续标准化
• 维护状态： 截至 2026-08-27，以页面所链接的官方生命周期或规范状态为准
• 运行时或平台基线： 正式 CSS 模块、Web Platform Baseline 与项目支持的浏览器矩阵

迁移影响： CSS 没有单一运行时升级动作；迁移影响应通过目标浏览器测试、渐进增强、@supports 和构建工具兼容性验证，不能把某个“CSS3”标签当成完整能力集合。

版本确认

在目标浏览器的开发者工具与自动化兼容测试中记录实际引擎版本和功能检测结果。

资料核对日期：2026-08-27。