CSS3 是什么?它和 CSS2 有什么区别

CSS3 不是一份一次性发布的新规范，而是 CSS 从“单一版本”转向“模块化演进”之后，各功能模块的统称。它和 CSS2 最实质的区别在于：CSS2 是一整份规范文档，而 CSS3 把样式能力拆成多个独立模块，各自推进、各自被浏览器支持。因此你不需要等“CSS3 全部就绪”才能用，可以按模块逐步引入。理解这一点，是判断某个特性能不能用、该怎么用的前提。

从“一份规范”到“一堆模块”

CSS2（以及后来的 CSS 2.1）是一份完整规范，浏览器要支持就整体对照实现。CSS3 改变了组织方式：

• 每个能力单独成模块，例如圆角属于 Backgrounds and Borders，动画属于 Animations，布局属于 Flexbox、Grid。
• 模块成熟度不同，浏览器支持进度也不同。
• 模块可以独立修订，不会因为某个特性没定稿而拖住其他特性。

这带来的实践结论是：谈“CSS3 兼容性”意义不大，要具体到某个模块、某个属性。

CSS2 没有、CSS3 带来的主要能力

下面按用途分组，都是 CSS2 时代需要图片、脚本或额外标签才能实现的效果。

视觉装饰

过渡与动画

• transition：属性值变化时自动补间，例如悬停变色、按钮放大。
• animation 配合 @keyframes：定义多段关键帧，做循环或复杂动效。
• transform：translate、rotate、scale、skew，且可配合 translate3d 等触发硬件加速。

CSS2 时代这些基本靠 JavaScript 定时改样式或 Flash 实现。

布局与响应式

• 媒体查询（@media）：按视口宽度、分辨率等条件应用不同样式，是响应式设计的基础。
• 弹性盒 Flexbox：一维布局，解决垂直居中、等分、顺序调整等老难题。
• 多列布局（column-count 等）：文本分栏。
• Grid：二维布局，属于较晚成熟的模块。

CSS2 时代主要靠 float、position 和表格布局，垂直居中尤其麻烦。

选择器与字体

• 属性选择器、结构伪类（:nth-child、:not 等）让选择更精确，减少加 class。
• @font-face 允许网页直接引用字体文件，不再局限于系统已装字体。

怎么在真实页面里逐步引入

不必一次性重写样式，按“低风险到高风险”推进更稳：

1. 先加装饰性属性：border-radius、box-shadow、rgba。这些即使不被支持，页面也只是少个圆角或阴影，不影响可用性。
2. 再加过渡：给已有 :hover 状态补 transition，属于纯增强。
3. 然后处理布局：用 Flexbox 替换部分 float 布局，注意先在小范围验证。
4. 最后上动画和响应式断点：动效和媒体查询改动面大，建议配合真机测试。

验证方法：改完后在目标浏览器里逐条检查——装饰是否显示、悬停是否平滑、窄屏下布局是否错乱、动画是否卡顿。用开发者工具临时禁用某条属性，可以快速判断它是不是关键依赖。

兼容与渐进增强的思路

核心原则是：基础样式保证可用，CSS3 特性只做增强。

• 把关键布局写成不依赖新特性的形式，新特性作为叠加。
• 对可能不支持的特性，可先写旧写法再写新写法，让浏览器按顺序覆盖。
• 需要时用 @supports 做特性检测，而不是猜浏览器版本。

例如需要给卡片加圆角和阴影时，先确保卡片本身用普通边框也能看清，再叠加 border-radius 和 box-shadow。这样在旧环境里退化，在新环境里增强。

一个具体例子

假设要做一张悬停时轻微上浮的卡片：

• 基础：border: 1px solid #ccc; 保证无阴影时也有边界。
• 增强：border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.15);
• 交互：transition: transform .2s;，:hover { transform: translateY(-4px); }

不支持 transform 的环境里，卡片仍可正常阅读，只是没有上浮效果——这就是渐进增强的落地方式。

关于模板资源

如果不想从零搭页面，可以参考现成的响应式模板。例如 HTML5 UP!（html5up.net）提供由 @ajlkn 设计的响应式 HTML5 与 CSS3 站点模板，其页面关键词涵盖 html5、css3、responsive、site template、website template。这类模板通常已经把媒体查询、Flexbox 等模块组合好，适合作为学习 CSS3 实际用法的参考，或作为项目起点。使用前建议先确认其授权条款是否匹配你的用途。