浏览器中的 CSS3 支持：前缀表

现代浏览器 CSS3 特性支持：兼容性表格

当前浏览器版本对 CSS3 属性的支持并不完整，即使 W3C 标准尚未完全敲定。开发者需要考虑厂商前缀和最低版本要求，以实现跨浏览器兼容。下面表格详细列出了关键属性的支持情况，包括前缀需求（-ms-、-moz-、-webkit-、-o-）和浏览器版本。这能帮助你在项目中准确规划特性使用。

表格说明：

• 图标表示 IE、Firefox、Chrome、Safari、Opera 的支持情况。
• 数字显示最低浏览器版本。
• 带前缀的变体单独注明。

(此处插入 CSS3 支持速查表图片，便于快速参考。)

浏览器支持详情

Internet Explorer 从 9+ 版本开始支持 -ms- 前缀特性，如 border-radius 和 box-shadow。Firefox 在 16 版之前使用 -moz- 前缀，此后许多属性转向标准名称。Chrome 和 Safari 依赖 -webkit- 前缀，从 4–5 版开始支持，并逐步为最终规范去除前缀。

Opera 从 10.5 版起使用 -o-（偶尔 -xv-）前缀。完整表格涵盖以下属性：

• 动画与变换：transition、animation、transform。
• 边框与阴影：border-radius、box-shadow。
• 背景与渐变：background-clip、linear-gradient。
• 字体与文本：@font-face、text-shadow。
• 布局：flexbox（display: flex）、multi-column。

| 属性 | IE (版本) | Firefox (版本) | Chrome (版本) | Safari (版本) | Opera (版本) |

|----------------|--------------|----------------|----------------|---------------|---------------|

| border-radius | 9 (-ms-) | 4 (-moz-) | 4 (-webkit-) | 5 (-webkit-) | 10.5 (-o-) |

| box-shadow | 9 (-ms-) | 4 (-moz-) | 10 (-webkit-) | 5.1 (-webkit-)| 10.5 (-o-) |

| transition | 10 | 16 | 26 | 6.1 | 12.5 |

此表格基于 2012 年数据，但前缀原则对遗留项目仍具参考价值。

厂商前缀的使用

• 自动化处理：在构建工具（Webpack、Gulp）中使用 Autoprefixer，根据 Can I Use 数据自动添加前缀。
• Polyfill 填充：支持较弱时，使用 Modernizr 等 JS 库进行检测并提供降级方案。
• 后处理：PostCSS 等工具动态生成厂商前缀。
• 测试：在模拟器和真实设备上验证，重点关注移动端 Safari/Chrome。
• 优雅降级：确保老版 IE 无 CSS3 时也能基本渲染。

变换前缀示例代码：

.element {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

更新与资源

支持情况已演进：如今 Chrome 111+、Firefox 115+、Safari 17+ 大多无需前缀即可使用多数属性。查看兼容性数据库获取最新信息。该表格适合审计旧代码或迁移至现代标准。

关键要点

• 遗留项目必备前缀：-webkit- 覆盖 2020 年前 80% 移动浏览器。
• 最低版本：Chrome 4+、Firefox 4+、IE 9+ 可覆盖 95% 用户（发布时数据）。
• 自动化简化：Autoprefixer 免除手动操作。
• 测试至关重要：阴影和渐变在不同引擎中渲染差异明显。
• 无前缀未来：W3C 标准化加速淘汰厂商扩展。

— Editorial Team