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

这套 CSS3 教程的定位

高洛峰这套 CSS3 视频教程一共 20 节，体量不大，属于典型的「短平快讲透一个技术点」的录屏课。如果你正在学前端、或者写页面时对选择器、盒模型、过渡动画这些东西一直停留在「照着别人的代码改」的阶段，这份资料的价值在于：它把 CSS3 相对 CSS2.1 新增的那部分能力集中讲了一遍，而不是散落在各种项目实战里让你自己拼。

需要先说明一点：这份资料的核心是 CSS3 规范层面的知识讲解，不涉及什么运维、云原生方向的内容——那类描述和文件本身对不上。它就是一门纯前端样式课，看之前请先对号入座。

内容覆盖的技术点

CSS3 和早期 CSS 最大的区别，是它把很多原本要靠图片、JS 或第三方库才能实现的效果，变成了原生属性。这 20 节课基本沿着这条线展开，大致会涉及：

• CSS3 新增选择器，包括属性选择器、结构伪类（:nth-child系列）、伪元素（::before/::after），这是往后所有效果的地基；
• 圆角border-radius、阴影box-shadow/text-shadow、渐变linear-gradient/radial-gradient，用于替代早期的切图方案；
• 2D / 3D 变换transform（位移、旋转、缩放、倾斜）和transition过渡；
• animation与@keyframes，做不依赖 JavaScript 的关键帧动画；
• 多列布局、媒体查询等偏响应式的语法基础。

这些点单看都不难，难点在于组合使用时的层级和性能问题——什么时候用 transform 而不是改 top/left，什么时候过渡会掉帧。录屏课的好处是能看到写代码、改参数、浏览器实时反馈的完整过程，比只看静态文档更容易建立手感。

怎么用这份资料才算没白看

20 节视频按顺序过一遍，一天能刷完，但那样基本等于没学。更有效的做法是把它当参考手册来用：

• 先自己写一遍每个 demo，参数改成别的值看看效果怎么变，不要只是跟着敲；
• 过程中把每个属性对应的浏览器前缀、兼容情况记一笔，这是当时 CSS3 落地的主要坑；
• 学完一节就去找一个真实页面，看看里面哪些效果用到了刚讲的属性；
• 看完变换和动画部分后，尝试用纯 CSS3 复刻几个常见的交互效果，比如按钮悬停、卡片翻转、加载动画。

视频里的示例代码是现成的，但你最好只把它们当参考答案。真正拉开差距的是「换一个需求能不能自己推出来」，这一点录屏课帮不上，只能靠动手。

适合哪些人、需要注意什么

这份资料适合两类人：一是刚接触前端、需要把 CSS 基础语法系统过一遍的初学者；二是写了很久 CSS2，但对新增属性一知半解、总靠搜索引擎拼凑的开发者。它不太适合已经熟练使用各类 UI 框架、并且理解 CSS 层叠与优先级的人，那部分内容对你会偏浅。

另外要提醒两点。第一，教程录制时间较早，里面提到的某些兼容写法和浏览器前缀现在大多已经不需要了，学习时关注属性本身的语义即可，不要照搬前缀代码。第二，20 节的量决定了它只能讲到「会用」，讲不到「懂原理」。真正想深入的话，后面还得自己补 CSS 层叠上下文、BFC、Flex/Grid 布局这些内容，它们不在这套课程的重点里。

课程配套的章节笔记可以拿来课后对照，但建议你整理成自己的版本——把看过的属性没记住的部分写下来，比收藏别人的笔记有用得多。