第一章
- 尽量减少代码重复：代码可维护性的最大要素是尽量减少改动时要编辑的地方。
- 关于响应式设计：每个媒体查询都会增加成本。
- 合理使用简写：合理使用简写是一种良好的防卫性编码方式，可以抵御未来的风险。如果只为某个属性提供一个值，那 它就会扩散并应用到列表中的每一项。
- 关于CSS预处理：如果使用得当，它们在大型项目中可以让代码更加灵活。缺点，CSS 的文件体积和复杂度可能会失控，调试难度会增加，预处理器在开发过程中引入了一定程度的延时。
第二章 背景与边框
- 半透明边框：hsla、rgba、background-clip处理。
- 多重边框：box-shadow逗号分隔多重投影、outline+border双重边框。
- 背景定位：background-position、background-origin背景定位模式、calc计算背景位置。
- 边框与圆角：border-radius
- 条纹背景：线性渐变linear-gradient及background-size背景大小
- 复杂的背景图案：background-image与linear-gradient的逗号分隔、background-position结合使用。
- 连续的图案边框：background、linear-gradient、background-size、background-clip、background-origin结合使用。
第三章 形状
- 自适应椭圆： border-radius水平方向与垂直方向，斜杠。
- 平行四边形：transform的skewX，文字反向skewX。
- 菱形：transform的rotate。
- 切片效果：直角切片linear-gradient、弧形切片radial-gradient，clip-path的polygon。
- 梯形标签页：transform-origin、transform的perspective、rotateX使用。
第四章 视觉效果
- 单侧投影：box-shadow。
- 不规则投影：filter的drop-shadow。
- 染色效果：filter的sepia、saturate、hue-rotate。background-blend-mode的luminosity。
- 毛玻璃效果：filter的blur以及伪元素的使用。
第七章 布局与结构
- 自适应内部元素：width的min-content使用。
- 精确控制表格列宽：table-layout的fixed、text-overflow的ellipsis。
- 根据兄弟元素的数量来设置样式：:nth-child(an+b)、:nth-last-child(an+b)、~选择器
- 满幅的背景，定宽的内容：calc使用。
- 垂直居中：定位方案、calc使用、transform。
第八章 过渡与动画
- 缓慢动画：动画的基本使用、ease使用、transition-timing-function的cubic-bezier设置贝塞尔调速函数。
- 逐帧动画：animation的steps设置逐帧调速函数使用。
- 闪烁效果：animation-direction反正动画循环alternate、reverse、alternate-reverse。