CSS3网页设计与制作(6-11)：颜色特性/新型盒模型/边框/背景/渐变

这门课在补什么能力缺口

很多人在写CSS时只会“按模板填属性”：透明背景直接用opacity，结果把里面的文字也弄透明了；想让盒子圆角就写个border-radius，但不知道它和边框宽度、背景裁剪之间的相互作用；做自适应布局时，明明设置了宽高，加上内边距和边框就撑破了容器。这些问题的根源，是没有把CSS3新增的颜色、盒模型、边框属性当成一个“有逻辑关系的系统”来理解。

这门课的主题，就是把这几类最容易出错的CSS3能力集中讲透。颜色方面，重点区分opacity和RGBA——前者影响整个元素包括子元素的透明度，后者只影响背景色本身。盒模型方面，box-sizing是布局刚需，用它才能真正控制“宽度是否包含内边距和边框”，这也是很多初学flex和网格布局时踩坑的起点。边框和背景方面，圆角、阴影、渐变这些属性看似简单，但它们的取值语法、简写规则、以及多个背景叠加时的顺序，都需要搞清楚“为什么这样写”。

看完这门课，你应该能回答几个典型问题：box-sizing: border-box到底改变了什么？text-shadow和box-shadow的四个值分别代表什么？渐变的方向、色标、透明渐变怎么组合出可用的背景？这些正是直接写页面时会遇到的具体障碍。

适合什么基础，建议先看哪几块

这门课适合已经会写基本选择器和常用属性、但没系统学过CSS3新增模块的学习者。如果你能独立写一个简单的静态页面，但不清楚各类属性在浏览器中如何计算，那么这门课能帮你把“会用”变成“懂原理”。如果你是完全零基础，建议先补一下CSS基础语法和盒模型的基本概念，再来看这里的内容。

建议优先看这几个部分：第一是新型盒模型中的box-sizing，它是后续做布局的基石，也是面试和实际开发中高频出现的考点；第二是颜色特性中的RGBA和opacity，两者区别必须亲手验证；第三是边框新增属性中的border-radius，以及它和背景裁剪、阴影一起使用时的表现。文本阴影和溢出文本属性可以稍后看，但在实现“单行省略号”“卡片投影”等效果时很实用，建议至少跟着做一遍。

注意，标题中提到的“背景”和“渐变”，虽然资料线索里没展开，但课程应该包含背景渐变、多背景、线性/径向渐变等写法，这部分是视觉效果的关键。你在学习时，不要只背属性名，要关注每种属性在Firefox和Chrome中是否需要前缀，以及简写时覆盖了哪些子属性。

学完能独立做什么，资料怎么配合练

学完这门课，你能够独立完成一系列常见的界面模块：背景透明的导航栏、带圆角和多