高洛峰CSS3视频教程（共20节课）

高洛峰这套 CSS3 教程一共 20 节，属于那种「年代有点久、但骨架仍然立得住」的老课。它不是照着 W3C 文档念参数的那种讲法，而是把 CSS3 里真正会被用到的模块挑出来，一节一个主题地过。20 节的体量意味着它没法把每个属性都铺开讲，取舍本身就是判断：讲到的多半是当年项目里绕不开的，没讲到的多半是兼容性坑太深的。

课纲的含金量在哪

这份课纲的价值不在「全」，而在「成块」。CSS3 相比 CSS2.1 最大的变化是引入了一批独立模块——圆角与阴影、渐变、过渡、动画、变形、媒体查询、弹性布局。这套教程基本按模块切分，而不是按属性字母顺序罗列。对自学者来说，模块化切分的好处是：你能清楚知道自己在补哪一块能力，而不是学了十几个属性还拼不出一个完整效果。

它的短板也要说清楚：录制时间较早，讲的应该是 flex 而不是 grid，响应式部分大概率停留在媒体查询 + 百分比布局的阶段，不会涉及现在的容器查询、逻辑属性这些。把它当成「补齐 CSS3 核心模块的底子」是合适的，指望它覆盖 2024 年之后的新特性，不现实。

哪几节值得精看、哪几节可以快进

• 过渡与动画两节，值得反复看。这两块是 CSS3 里最容易被「背了属性但写不出效果」卡住的地方。老课讲动画通常会把关键帧的时间轴拆得很细，配合实际元素演示，比看文档直观得多。
• 变形（transform）一节，建议边看边敲。2D 与 3D 的坐标系是理解难点，光看视频很难建立空间感，必须自己把元素转起来。
• 选择器与伪类部分，可以快进。这类内容查文档效率更高，视频讲一遍的记忆留存并不好。
• 基础语法、颜色单位这类前几节，有一定基础的话直接跳到模块部分。不必按顺序从头啃。

资料包怎么拆开用

这类老视频资源通常按节切成独立片段，配套的章节笔记如果存在，价值反而比视频本身更耐用——笔记是压缩过的，适合面试前扫一遍。比较高效的用法是：先看一节视频，立刻脱离视频凭记忆手写一遍效果，卡住再回看对应片段；笔记留到最后做总复习用，而不是边看边抄。视频一次过，笔记反复用，两者分工不同。

如果资料里有示例代码或素材，优先看素材的组织方式，而不是直接抄代码。CSS3 的很多效果是「差一点点就不对」的，抄一遍学不到调试过程，自己从零写一遍才知道坑在哪。

放在什么位置学

这套课更适合当作 HTML 与 CSS 基础之后的加固环节，而不是零起点入口。如果你已经能写静态页面，但对圆角、渐变、动效这些还停留在复制粘贴的层面，用它把模块补齐，性价比不错。学完之后建议做一件事：找一个真实的页面（登录页、商品卡片、加载动画），只用 CSS3 特性重写一遍，把 20 节里讲到的模块串起来用。这比再看第二套教程有用。