第1章 CSS基础知识 1
1.1 CSS简介 2
1.2 在页面中应用CSS 2
1.2.1 内联样式 2
1.2.2 style元素 3
1.2.3 link标记 3
1.3 常用CSS属性一览 4
1.4 选择器 5
1.4.1 标签选择器 5
1.4.2 类选择器 6
1.4.3 后代选择器 7
1.4.4 伪类选择器 8
1.5 单位 15
1.5.1 长度 15
1.5.2 颜色 17
1.6 盒模型 21
1.6.1 内边距、边框和外边距 21
1.6.2 box-sizing 22
1.7 定位 23
1.7.1 相对定位 24
1.7.2 绝对定位 25
1.8 布局 26
1.8.1 flex布局 26
1.8.2 grid布局 30
1.9 重叠 32
1.9.1 元素之间的重叠关系 32
1.9.2 含有子元素的容器之间的重叠关系 34
1.9.3 主元素与子元素（伪元素）之间的重叠关系 35
1.10 继承和引用 36
1.10.1 继承 36
1.10.2 引用颜色 37
1.10.3 引用尺寸 39
第2章 伪元素 40
2.1 ::before和::after伪元素 41
2.2 content属性 42
2.3 灵活使用伪元素 44
2.3.1 用伪元素拼接造型 44
2.3.2 用主元素和伪元素拼接造型 45
2.3.3 用伪元素表现造型的一部分 46
2.3.4 用主元素和伪元素表现造型的3个部分 48
2.3.5 用伪元素表现成对的元素 49
2.4 项目应用 51
2.4.1 项目一：蒸锅 51
2.4.2 项目二：怪兽 55
第3章 边框 63
3.1 边框属性 64
3.1.1 边框样式border-style 64
3.1.2 边框宽度border-width 64
3.1.3 边框颜色border-color 65
3.1.4 分别设置每条边框 65
3.1.5 边框圆角border-radius 66
3.1.6 轮廓线outline 68
3.2 描边造型 69
3.2.1 同心正方形 70
3.2.2 同心圆 70
3.2.3 圆弧 71
3.3 几何造型 72
3.3.1 圆形 72
3.3.2 半圆形 73
3.3.3 扇形 74
3.3.4 三角形 76
3.3.5 组合的花形 77
3.4 项目应用 78
3.4.1 项目一：铅笔 78
3.4.2 项目二：宇宙飞船 83
第4章 背景 89
4.1 背景属性 90
4.1.1 背景颜色background-color 90
4.1.2 背景图片background-image 91
4.1.3 背景位置background-position 91
4.1.4 背景尺寸background-size 92
4.1.5 背景平铺background-repeat 93
4.2 线性渐变linear-gradient（） 94
4.2.1 多个参数值 94
4.2.2 锐利的线性渐变 95
4.2.3 线性渐变的角度 95
4.2.4 有透明度的线性渐变 96
4.3 径向渐变radial-gradient（） 96
4.3.1 多个参数值 96
4.3.2 锐利的径向渐变 97
4.3.3 椭圆和正圆 97
4.3.4 有透明度的径向渐变 98
4.4 项目应用 99
4.4.1 项目一：熊猫 99
4.4.2 项目二：雷达扫描 105
第5章 阴影 111
5.1 盒阴影box-shadow 112
5.1.1 外部阴影 112
5.1.2 内部阴影 115
5.1.3 多重阴影 116
5.1.4 复制自身的阴影 117
5.2 形状阴影函数drop-shadow（） 118
5.3 项目应用 120
5.3.1 项目一：日历 120
5.3.2 项目二：飞机舷窗 124
第6章 剪切、滤镜和色彩混合 130
6.1 剪切clip-path 131
6.1.1 矩形剪切inset（） 131
6.1.2 圆形剪切circle（） 132
6.1.3 椭圆形剪切ellipse（） 133
6.1.4 多边形剪切polygon（） 133
6.2 滤镜filter 134
6.2.1 透明度滤镜opacity（） 135
6.2.2 模糊滤镜blur（） 135
6.2.3 色相滤镜hue-rotate（） 135
6.2.4 亮度滤镜brightness（） 136
6.2.5 对比度滤镜contrast（） 137
6.2.6 多重滤镜 139
6.3 色彩混合 139
6.3.1 multiply模式 139
6.3.2 screen模式 140
6.3.3 difference模式 140
6.3.4 color-dodge模式 141
6.4 项目应用 141
6.4.1 项目一：莲花 141
6.4.2 项目二：彭罗斯三角形 145
第7章 变量与计数器 151
7.1 变量 152
7.1.1 声明和引用变量 152
7.1.2 表达式 155
7.1.3 批量描述一组元素的样式 157
7.2 计数器 159
7.2.1 计数器的声明、累加和读取 159
7.2.2 计数器初始值和步长 161
7.2.3 计数器的序列值 161
7.2.4 用计数器设计一个字母表 162
7.3 项目应用 164
7.3.1 项目一：监控眼 164
7.3.2 项目二：纸鹤 168
第8章 变换 173
8.1 变换函数 174
8.1.1 平移函数translate（） 174
8.1.2 旋转函数rotate（） 176
8.1.3 缩放函数scale（） 178
8.1.4 扭曲函数skew（） 181
8.2 变换原点transform-origin 184
8.3 多重变换 187
8.4 项目应用 189
8.4.1 项目一：炫彩旋臂 189
8.4.2 项目二：两只鹦鹉 192
第9章 缓动 198
9.1 缓动属性 199
9.1.1 持续时长transition-duration 199
9.1.2 延时启动时长transition-delay 200
9.1.3 参与缓动的属性transition-property 200
9.1.4 时间函数transition-timing-function 201
9.2 设置恢复效果 204
9.3 令一组元素缓动 205
9.4 对元素的不同状态进行交互设计 206
9.4.1 获得焦点：focus 206
9.4.2 选择选项：checked 207
9.4.3 页内跳转：target 208
9.5 项目应用 209
9.5.1 项目一：彩虹 209
9.5.2 项目二：两颗爱心 213
第10章 动画 219
10.1 动画属性 220
10.1.1 语法结构 220
10.1.2 持续时长animation-duration 221
10.1.3 延时启动时长animation-delay 222
10.1.4 时间函数animation-timing-function 224
10.1.5 播放次数animation-iteration-count 224
10.1.6 变化方向animation-direction 225
10.1.7 填充模式animation-fill-mode 226
10.1.8 播放状态animation-play-state 228
10.1.9 多个动画效果叠加 229
10.2 关键帧@keyframes 230
10.2.1 from...to...关键帧 230
10.2.2 百分比关键帧 231
10.2.3 循环效果 231
10.2.4 静止效果 233
10.2.5 关键帧的缺点 234
10.3 不同属性的动画效果 235
10.3.1 边框动画 235
10.3.2 背景动画 236
10.3.3 阴影动画 237
10.3.4 剪切动画 238
10.3.5 变换动画 239
10.4 项目应用 240
10.4.1 项目一：乒乓球对打 240
10.4.2 项目二：徘徊的果冻怪兽 244
第11章 CSS造型创意 250
11.1 螺旋形状的盘式蚊香 251
11.2 倒圆锥形状的热气球 256
11.3 逼真金属质感的笔记本电脑 261
11.4 用典型特征塑造的卓别林形象 266
第12章 CSS动画创意 272
12.1 层叠起伏的海浪 273
12.2 天体运转模型 277
12.3 充满秩序美的队列变色旋转动画 283
12.4 几何光学引起的咖啡馆墙壁错觉动画 287
第13章 文字特效创意 292
13.1 撕纸文字 293
13.2 牛奶文字 296
13.3 闪光的霓虹文字 300
13.4 立体的阶梯文字 306
附录 CSS色彩名称对照表 312