01CSS3 总览

CSS3 不是一个新语言，而是 CSS2.1 之后所有演进的总称： 它被拆成一个个「模块」各自更新。圆角、阴影、渐变、变换、动画、响应式—— 现代网页颜值的全部来源，都在这个模块里。

约 25 分钟 4 个动手实验 CSS3 模块开局

一、CSS3 是什么：从「一本书」到「一套丛书」

CSS2.1 时代，规范像一本定稿的教科书：十年不改版，能做的只有布局、颜色、字体。 之后 W3C 改了思路——不再憋一个「CSS4 大版本」，而是把 CSS 拆成模块（module）， 每个模块自己定版本、自己往前跑：选择器已经更新到 Level 4，弹性盒、网格各自成册。

所以「CSS3」更像一个时代的昵称：泛指 CSS2.1 之后出现的这一大批新能力。 好消息是——它们早已在所有主流浏览器稳定支持，放心用。

CSS3 主要模块一览：代表能力与在哪学
模块代表能力在哪学
选择器属性选择器、结构伪类、伪元素前面「CSS 基础」课的选择器进阶一课
盒模型box-sizing、内外边距控制前面「CSS 基础」课的盒模型一课
背景与边框多重背景、渐变、圆角、阴影、图片边框本模块第 2、3 课
文字效果文字阴影、换行控制、@font-face 自定义字体本模块第 4 课
2D / 3D 转换translate / rotate / scale / skew、透视空间本模块第 5 课
过渡与动画transition 补间、@keyframes 关键帧本模块第 6、7 课
多列布局columns 报纸式多栏排版了解即可，用得少
媒体查询@media 按屏幕宽度换样式本模块第 8 课

这张卡片就是本模块的「预告片」：圆角、渐变、阴影、文字阴影、动画、转换六个特性一锅端，先混个脸熟：

渐变角度改 45deg、动画时长改 0.5s、阴影模糊改 4px——每个 CSS3 特性各管一摊
这张卡片就是本模块的「预告片」：接下来的 7 课会把它拆开揉碎， 每个特性单独练一遍，最后你随手就能写出这种效果。

二、本模块学习地图

先看地图再上路。这 7 站是层层递进的： 前四课管「静态颜值」，第五课管「变形」，后三课管「动起来 + 适配所有屏幕」。

本模块 7 课能力地图：从静态到动态
能力一句话说明章节
圆角与阴影border-radius 圆润化，box-shadow 给立体感第 2 课
背景与渐变不用图片，纯 CSS 画出渐变、条纹、光斑第 3 课
文本效果与字体文字阴影、长文本换行策略、自定义字体第 4 课
2D 与 3D 转换挪、转、缩、斜，还能进 3D 空间翻牌第 5 课
过渡样式变化从「跳变」变「平滑滑过去」第 6 课
动画多关键帧、可循环的导演级动效第 7 课
响应式设计一套代码适配手机 / 平板 / 桌面第 8 课
六枚徽章各演示一个特性——第 5 枚要鼠标悬停才转；把第 6 枚动画时长改短看眨眼变快

三、浏览器兼容与厂商前缀

CSS3 规范曾长期「边定边实现」：浏览器厂商等不及标准定稿，就先出自己的实验版本， 并在属性前加厂商前缀标记「这是我家还没定稿的实现」。 同一个效果，老代码要写一串：

四大厂商前缀：谁家用哪个
前缀厂商示例
-webkit-Chrome / Safari（含新版 Edge）-webkit-border-radius
-moz-Firefox-moz-border-radius
-ms-IE / 旧版 Edge-ms-transform
-o-老 Opera（已基本退役）-o-transform
查兼容性用 Can I Use（caniuse.com）； 补前缀交给 Autoprefixer——构建工具按浏览器市占率自动加， 手工写前缀的时代已经过去了。

四、渐进增强与优雅降级：两种兼容思想

面对五花八门的浏览器，怎么保证页面不崩？业界有两种思路， 方向刚好相反：

渐进增强 vs 优雅降级：两种兼容思路对照
对比项渐进增强（推荐）优雅降级
出发点先保证核心内容人人可用，再给新浏览器「加糖」先按最新浏览器做完美版，再为老浏览器打补丁
写法顺序基础样式在前，增强样式在后覆盖完整样式在前，降级 hack 在后
老浏览器看到保底版本：内容完整、能用可能缺胳膊少腿（靠补丁兜住）
适合内容型网站、面向大众的产品内部工具、强依赖新特性的项目

渐进增强最经典的实现手法，就是「同属性写两遍」： 第一行写老浏览器都认识的值，第二行写新值——认识就用新的覆盖，不认识就整行忽略、保留第一行。

左边只写第一行「纯色保底」，右边两行都写被渐变覆盖——把右边第二行注释掉，就变回纯色
口诀：「先保底，再加糖」。向下兼容靠「属性回退」， 而不是靠死记哪年哪个浏览器支持什么——那是工具的活，不是人的活。

五、@supports：让浏览器「自报家门」

属性回退是「被动」的，CSS3 还提供了主动检测的语法—— @supports：让浏览器自己回答「你支持这个属性吗」， 支持才应用花括号里的规则，相当于 CSS 里的 if 判断。

左卡是基础样式，右卡包在 @supports 里——你的浏览器支持 grid，右卡就自动换装成绿色渐变
@supports 的日常用途：给支持新特性的浏览器上「进阶版布局」， 不支持的自动用上面的兜底版——渐进增强的「主动版」。 入门阶段看得懂即可，项目里遇到再深入。

六、怎么查手册：授人以渔

CSS3 属性成百上千，没有人靠背。专业的做法是「三步查法」： 先快速查语法和示例 → 需要时深挖细节 → 动手改参数验证。三个场景对应三个工具：

三步查法：不同场景去不同地方
场景去哪查特点
快速查语法、看示例菜鸟教程 · CSS3 参考手册中文、例子全、每个属性带「试一试」，入门速查首选
深挖细节、默认值、边界情况MDN（developer.mozilla.org）权威准确，含兼容性表格，进阶必存书签
查浏览器支持度Can I Use（caniuse.com）输入属性名，一眼看出全球支持率
真正学会本页实时实验台改一个数字，胜过看十遍文档
  • 带着问题查：「我想让阴影往右下飘」→ 搜 box-shadow，比通读手册高效十倍
  • 查到的代码复制进实验台跑一遍，改改参数确认理解，再收进自己的代码片段库
  • 同一效果可能有多种写法（渐变 vs 图片、transition vs animation），比较着学，进步最快
建议现在就打开一个搜索引擎，搜「菜鸟教程 CSS3 参考手册」收藏它—— 这个模块剩下的 7 课，你都会和它打交道。

七、本章小结

  • CSS3 = CSS2.1 之后演进的总称，规范被拆成模块各自更新，没有「CSS4」
  • 本模块七站：圆角阴影 → 渐变 → 文本效果 → 转换 → 过渡 → 动画 → 响应式，层层递进
  • 厂商前缀（-webkit- / -moz- / -ms- / -o-）已基本退役，量产交给 Autoprefixer，查兼容交给 Can I Use
  • 兼容心法是渐进增强：「先保底，再加糖」——基础样式在前，增强样式覆盖在后
  • @supports (属性: 值) { … } 是 CSS 的 if 判断，让浏览器自报支持情况
  • 查手册三步法：菜鸟速查 → MDN 深挖 → 实验台验证，没有人靠背属性
动手练习：滚回第一节的「CSS3 特性全家福」卡片实验台， 做三件事——①把渐变角度 135deg 改成 45deg； ②把动画时长 3s 改成 0.5s； ③把 box-shadow 的 32px 模糊改成 4px。 每改一次观察右侧预览——这就是学 CSS3 的正确姿势。