CSS3 词条目录
前端Wiki/CSS3/基础/初识 CSS3

模块化与前缀

CSS3 没有一个叫「CSS3 规范」的大文件，而是被拆成几十个独立模块：选择器、背景与边框、颜色、2D/3D 变换、动画、多列布局……各模块独立制定、独立推进。某个模块定稿了就先落地，不必等其他模块，这让浏览器厂商能快速迭代。

这也解释了历史包袱——厂商前缀。在标准定稿前的试验阶段，各浏览器用自己的前缀实现新属性：

  • -webkit-：Chrome、Safari（基于 WebKit/Blink）
  • -moz-：Firefox
  • -ms-：IE/旧 Edge
  • -o-：旧 Opera

典型写法是前缀版本在前、标准写法在最后。今天大部分主流特性（圆角、阴影、flex 等）早已定稿，不需要再手写前缀；需要兼容老浏览器时，交给构建工具（如 Autoprefixer）按目标浏览器自动添加即可。

本节要点CSS3 由多个独立模块组成，各自推进；厂商前缀是历史产物，现在主要靠 Autoprefixer 自动生成，手动只写标准属性即可。
CSS
<style>
  /* 历史上的前缀写法（现代浏览器已不需要） */
  .old {
    -webkit-border-radius: 8px;  /* Chrome/Safari 旧版 */
    -moz-border-radius: 8px;     /* Firefox 旧版 */
    border-radius: 8px;          /* 标准写法放最后 */
  }
  /* 现代写法：只写标准属性 */
  .modern {
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
  }
  .old, .modern {
    width: 200px; padding: 12px;
    margin-bottom: 10px;
    background: #e0f7fa;
  }
</style>
<div class="old">需要前缀的老代码</div>
<div class="modern">现代浏览器直接写标准属性</div>
🔗 相关词条3D 变换CSS3flex浏览器选择器圆角阴影
← 上一篇CSS3 是什么
📚 推荐阅读
移动前端开发经验指南移动前端开发经验指南万象云档YY UED 前端规范指南YY UED 前端规范指南万象云档优达学城前端样式指南优达学城前端样式指南万象云档Element Plus v2.2 组件库教程Element Plus v2.2 组件库教程万象云档ECharts 图表教程ECharts 图表教程万象云档
来自万象云档的免费在线书籍，点击封面直接阅读