《图解CSS3：核心技术与案例实战》

本书是国内著名的Web前端专家历时2载的心血之作，根据最新的CSS3撰写，融入了作者在CSS领域多年的使用经验，旨在将本书打造成为CSS3领域最权威和实用的专业著作，供没有经验的读者系统学习，供有经验的读者参考备查。

本书理论知识系统全面，详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性，所有这些都巧妙地融入到案例中，而不是枯燥的理论讲解；讲解方式直观易懂，以图解的方式巧妙地展示了这些新特性；实战性强，既为每个知识点精心设计了小案例，也有综合性的大案例，所有案例都非常详尽，有功能需求分析、设计思路和完整代码，还有最终的效果展示。

互动出版网京东网当当网亚马逊签名版本

大纲

前　言

第1章　揭开css3的面纱 1

1.1　什么是css3 1
- 1.1.1　css3的新特性 2
- 1.1.2　css3的发展状况 4
- 1.1.3　现在能使用css3吗 5
- 1.1.4　使用css3有什么好处 5
1.2　浏览器对css3的支持状况 6
- 1.2.1　经典回顾：图说浏览器大战 7
- 1.2.2　浏览器的市场份额 8
- 1.2.3　主流浏览器对css3支持状况 9
1.3　渐进增强 11
- 1.3.1　渐进增强与优雅降级 11
- 1.3.2　渐进增强的优点 12
1.4　css3的现状及未来 13
- 1.4.1　谁在使用css3 13 -1.4.2　css3的未来 14
1.5　本章小结 14

第2章　css3选择器 15

2.1　认识css选择器 15
- 2.1.1　css3选择器的优势 15
- 2.1.2　css3选择器分类 16
2.2　基本选择器 16
- 2.2.1　基本选择器语法 16
- 2.2.2　浏览器兼容性 17
- 2.2.3　实战体验：使用基本选择器 17
- 2.2.4　通配选择器 18
- 2.2.5　元素选择器 18
- 2.2.6　id选择器 18
- 2.2.7　类选择器 19
- 2.2.8　群组选择器 20
2.3　层次选择器 21
- 2.3.1　层次选择器语法 21
- 2.3.2　浏览器兼容性 21
- 2.3.3　实战体验：使用层次选择器选择元素 21
- 2.3.4　后代选择器 23
- 2.3.5　子选择器 23
- 2.3.6　相邻兄弟选择器 24
- 2.3.7　通用兄弟选择器 25
2.4　动态伪类选择器 25
- 2.4.1　动态伪类选择器语法 26
- 2.4.2　浏览器兼容性 26
- 2.4.3　实战体验：美化按钮 27
2.5　目标伪类选择器 29
- 2.5.1　目标伪类选择器语法 29
- 2.5.2　浏览器兼容性 30
- 2.5.3　实战体验：制作手风琴效果 30
2.6　语言伪类选择器 33
- 2.6.1　语言伪类选择器语法 33
- 2.6.2　浏览器兼容性 34
- 2.6.3　实战体验：定制不同语言版本引文风格 34
2.7　ui元素状态伪类选择器 36
- 2.7.1　ui元素状态伪类选择器语法 36
- 2.7.2　浏览器兼容性 36
- 2.7.3　实战体验：bootstrap的表单元素ui状态 37
2.8　结构伪类选择器 41
- 2.8.1　重温html的dom树 41
- 2.8.2　结构伪类选择器语法 42
- 2.8.3　浏览器兼容性 43
- 2.8.4　结构伪类选择器中的n是什么 44
- 2.8.5　结构伪类选择器的使用方法详解 47
- 2.8.6　实战体验：css3美化表格 61
2.9　否定伪类选择器 66
- 2.9.1　否定伪类选择器语法 66
- 2.9.2　浏览器兼容性 67
- 2.9.3　实战体验：改变图片效果 67
2.10　伪元素 69
- 2.10.1　伪元素::first-letter 69
- 2.10.2　伪元素::first-line 70
- 2.10.3　伪元素::before和::after 70
- 2.10.4　伪元素::selection 72
2.11　属性选择器 73
- 2.11.1　属性选择器语法 73
- 2.11.2　浏览器兼容性 74
- 2.11.3　属性选择器的使用方法详解 75
- 2.11.4　实战体验：创建个性化链接样式 81
2.12　本章小结 84

第3章　css3边框 85

3.1　css3边框简介 85
- 3.1.1　边框的基本属性 85
- 3.1.2　边框的类型 86
- 3.1.3　谁在使用css3边框 88
3.2　css3边框颜色属性 88
- 3.2.1　border-color属性的语法及参数 88
- 3.2.2　浏览器兼容性 90
- 3.2.3　border-color属性的优势 90
- 3.2.4　实战体验：立体渐变边框效果 91
3.3　css3图片边框属性 91
- 3.3.1　border-image属性的语法及参数 92
- 3.3.2　border-image属性使用方法 92
- 3.3.3　浏览器兼容性 99
- 3.3.4　border-image属性的优势 100
- 3.3.5　实战体验：按钮圆角阴影效果 100
3.4　css3圆角边框属性 105
- 3.4.1　border-radius属性的语法及参数 105
- 3.4.2　border-radius属性使用方法 107
- 3.4.3　浏览器兼容性 114
- 3.4.4　border-radius属性的优势 115
- 3.4.5　实战体验：制作特殊图形 115
3.5　css3盒子阴影属性 118
- 3.5.1　box-shadow属性的语法及参数 118
- 3.5.2　box-shadow属性使用方法 119
- 3.5.3　浏览器兼容性 129
- 3.5.4　box-shadow属性的优势 130
- 3.5.5　实战体验：制作3d搜索表单 130
3.6　本章小结 133

第4章　css3背景 134

4.1　css3背景属性简介 134
- 4.1.1　背景的基本属性 134
- 4.1.2　与背景相关的新增属性 137
4.2　 css3背景原点属性 137
- 4.2.1　background-origin属性的语法及参数 137
- 4.2.2　background-origin属性使用方法 138
- 4.2.3　浏览器兼容性 140
4.3　css3背景裁切属性 141
- 4.3.1　background-clip属性的语法及参数 141
- 4.3.2　background-clip属性使用方法 143
- 4.3.3　浏览器兼容性 147
4.4　css3背景尺寸属性 148
- 4.4.1　background-size属性的语法及参数 148
- 4.4.2　background-size属性使用方法 149
- 4.4.3　浏览器兼容性 152
- 4.4.4　实战体验：制作全屏背景 153
4.5　内联元素背景图像平铺循环方式 154
4.6　css3多背景属性 154
- 4.6.1　css3多背景语法及参数 155
- 4.6.2　css3多背景的优势 156
- 4.6.3　浏览器兼容性 156
- 4.6.4　实战体验：制作花边框 157
4.7　本章小结 159

第5章　css3文本 160

5.1　css3文本简介 160
5.2　css3文本阴影属性 161
- 5.2.1　text-shadow属性的语法及参数 162
- 5.2.2　浏览器兼容性 162
- 5.2.3　实战体验：制作立体文本 163
5.3　css3溢出文本属性 166
- 5.3.1　text-overflow属性的语法及参数 166
- 5.3.2　浏览器兼容性 166
- 5.3.3　text-overflow属性使用方法 167
- 5.3.4　实战体验：制作固定区域的博客列表 168
5.4　css3文本换行 170
- 5.4.1　word-wrap属性 170
- 5.4.2　word-break属性 173
- 5.4.3　white-space属性 177
- 5.4.4　文本换行技巧 179
- 5.4.5　文本换行技术对比 180
5.5　本章小结 180

☆第6章　css3颜色特性 181

6.1　网页中的色彩特性 181
- 6.1.1　网页色彩的表现原理 181
- 6.1.2　web页面的安全色 182
- 6.1.3　色彩模式 183
6.2　css3透明属性 184
- 6.2.1　opacity属性的语法及参数 184
- 6.2.2　opacity浏览器兼容性 185
- 6.2.3　实战体验：制作透明过渡色块 185
6.3　css3颜色模式 187
- 6.3.1　rgba颜色模式 187
- 6.3.2　hsl颜色模式 190
- 6.3.3　hsla颜色模式 194
- 6.3.4　rgba和hsla颜色模式之间的选择 196
- 6.3.5　rgba/hsla的ie兼容方案 196
- 6.3.6　rgba/hsla滤镜格式 197
6.4　本章小结 197

第7章　css3盒模型 198

7.1　css盒模型简介 198
- 7.1.1　什么是盒模型 198
- 7.1.2　重置盒模型解析模式 199
7.2　css3盒模型属性 200
- 7.2.1　box-sizing属性的语法及参数 200
- 7.2.2　浏览器兼容性 201
- 7.2.3　实战体验：box-sizing拯救了布局 202
7.3　css3内容溢出属性 209
- 7.3.1　overflow-x和overflow-y属性的语法及参数 209
- 7.3.2　浏览器兼容性 209
7.4　css3自由缩放属性 210
- 7.4.1　resize属性的语法及参数 210
- 7.4.2　浏览器兼容性 210
- 7.4.3　实战体验：修改文本域随意调整大小的功能 210
7.5　css3外轮廓属性 211
- 7.5.1　outline属性的语法及参数 211
- 7.5.2　浏览器兼容性 212
- 7.5.3　outline和border的对比 212
- 7.5.4　实战体验：模仿边框效果 213
7.6　本章小结 213

第8章　css3伸缩布局盒模型 214

8.1　flexbox模型基础知识 214
- 8.1.1　css中的布局模式 214
- 8.1.2　flexbox模型的功能 215
- 8.1.3　flexbox模型中的术语 215
- 8.1.4　flexbox模型规范状态 218
- 8.1.5　flexbox模型浏览器兼容性 218
- 8.1.6　flexbox模型语法变更 219
8.2　旧版本flexbox模型的基本使用 221
- 8.2.1　伸缩容器设置display 222
- 8.2.2　伸缩流方向box-orient 224
- 8.2.3　布局顺序box-direction 226
- 8.2.4　伸缩换行box-lines 229
- 8.2.5　主轴对齐box-pack 232
- 8.2.6　侧轴对齐box-align 237
- 8.2.7　伸缩性box-flex 242
- 8.2.8　显示顺序box-ordinal-group 246
- 8.2.9　实战体验：box制作自适应的三列等高布局 249
8.3　混合版本flexbox模型的基本使用 253
- 8.3.1　伸缩容器设置display 253
- 8.3.2　伸缩流方向flex-direction 254
- 8.3.3　伸缩换行flex-wrap 257
- 8.3.4　伸缩流方向与换行flex-flow 259
- 8.3.5　主轴对齐flex-pack 259
- 8.3.6　侧轴对齐flex-align 262
- 8.3.7　堆栈伸缩行flex-line-pack 266
- 8.3.8　伸缩性flex 271
- 8.3.9　显示顺序flex-order 273
8.4　新版本flexbox模型的基本使用 275
- 8.4.1　伸缩容器display 275
- 8.4.2　伸缩流方向flex-direction 276
- 8.4.3　伸缩换行flex-wrap 276
- 8.4.4　伸缩流方向与换行flex-flow 277
- 8.4.5　主轴对齐justify-content 277
- 8.4.6　侧轴对齐align-items和align-self 278
- 8.4.7　堆栈伸缩行align-content 280
- 8.4.8　伸缩性flex 281
- 8.4.9　显示顺序order 285
8.5　综合案例：跨浏览器的三列布局 288
8.6　本章小结 292

第9章　css3多列布局 293

9.1　css3多列布局简介 293
- 9.1.1　浏览器兼容性 293
- 9.1.2　css3多列布局的属性 294
9.2　css3多列布局基本属性 295
- 9.2.1　columns属性的语法及参数 295
- 9.2.2　浏览器兼容性 295
- 9.2.3　实战体验：web页面的多列布局 296
9.3　css3多列布局列宽属性 297
- 9.3.1　column-width属性的语法及参数 297
- 9.3.2　实战体验：浏览器根据窗口宽度变化调整列数 298
9.4　css3多列布局列数属性 302
- 9.4.1　column-count属性的语法及参数 302
- 9.4.2　实战体验：显示固定列数 302
9.5　css3多列布局列间距属性 303
- 9.5.1　column-gap属性的语法及参数 304
- 9.5.2　实战体验：设置列间距 304
9.6　css3多列布局列边框样式属性 306
- 9.6.1　column-rule属性的语法及参数 306
- 9.6.2　实战体验：设置列边框 307
9.7　css3多列布局跨列属性 309
- 9.7.1　column-span属性的语法及参数 310
- 9.7.2　实战体验：文章标题跨列显示 310
9.8　css3多列布局列高度属性 311
9.9　本章小结 311

☆第10章　css3渐变 312

10.1　css3渐变简介 312
- 10.1.1　什么是色标 312
- 10.1.2　浏览器兼容性 313
10.2　css3线性渐变 314
- 10.2.1　css3线性渐变语法与参数 315
- 10.2.2　css3 线性渐变的基本用法 317
- 10.2.3　自定义css3线性渐变 324
- 10.2.4　实战体验：css3制作渐变按钮 325
10.3　css3径向渐变 333
- 10.3.1　css3径向渐变语法 333
- 10.3.2　css3径向渐变的属性参数 334
- 10.3.3　css3径向渐变的基本用法 335
- 10.3.4　实战体验：css3径向渐变制作圆形图标按钮 350
10.4　css3重复渐变 353
- 10.4.1　css3重复线性渐变 353
- 10.4.2　css3重复径向渐变 354
- 10.4.3　实战体验：制作记事本纸张效果 354
10.5　综合案例：css3渐变制作纹理背景 355
10.6　本章小结 357

第11章　css3变形 358

11.1　css3变形简介 358
- 11.1.1　css变形属性及函数 358
- 11.1.2　浏览器兼容性 359
11.2　css变形属性详解 360
- 11.2.1　transform属性 360
- 11.2.2　transform-origin属性 363
- 11.2.3　transform-style属性 370
- 11.2.4　perspective属性 372
- 11.2.5　perspective-origin属性 377
- 11.2.6　backface-visibility属性 380
11.3　css3 2d变形 385
- 11.3.1　2d位移 385
- 11.3.2　2d缩放 390
- 11.3.3　2d旋转 394
- 11.3.4　2d倾斜 396
- 11.3.5　2d矩阵 398
11.4　css3 3d变形 403
- 11.4.1　3d位移 404
- 11.4.2　3d缩放 406
- 11.4.3　3d旋转 407
- 11.4.4　3d矩阵 409
11.5　多重变形 410
- 11.5.1　2d多重变形制作立方体 410
- 11.5.2　3d多重变形制作立方体 412
11.6　综合案例：3d变形制作产品信息展示 413
11.7　本章小结 416

☆第12章　css3过渡 417

12.1　css3过渡简介 417
- 12.1.1　如何创建简单的过渡 417
- 12.1.2　浏览器兼容性 418
- 12.1.3　css3过渡属性 418
12.2　css3过渡子属性详解 420
- 12.2.1　指定过渡属性transition-property 421
- 12.2.2　指定过渡所需时间transition-duration 423
- 12.2.3　指定过渡函数transition-timing-function 425
- 12.2.4　指定过渡延迟时间transition-delay 431
- 12.2.5　多个css3过渡效果 433
12.3　css3触发过渡 434
- 12.3.1　伪元素触发 434
- 12.3.2　媒体查询触发 436
- 12.3.3　javascript触发 436
12.4　css3过渡技巧 437
- 12.4.1　一个完整的过渡 437
- 12.4.2　可过渡的属性 438
- 12.4.3　优先的过渡属性 439
- 12.4.4　过渡的开始和结束为auto 439
- 12.4.5　隐式过渡 439
- 12.4.6　开关状态的不同过渡方式 440
- 12.4.7　几乎无限延迟的过渡 441
- 12.4.8　通过硬件加速过渡更加流畅 441
- 12.4.9　过渡和伪元素 442
12.5　综合案例：纯css3制作css dock导航效果 443
12.6　本章小结 449

第13章　css3动画 450

13.1　css3动画简介 450
- 13.1.1　浏览器兼容性 450
- 13.1.2　css3动画属性 451
13.2　关键帧 452
- 13.2.1　@keyframes的作用 452
- 13.2.2　@keyframes的语法 453
- 13.2.3　浏览器兼容性 454
13.3　css中为元素应用动画 454
- 13.3.1　使用@keyframes声明动画 454
- 13.3.2　调用@keyframes声明的动画 456
13.4　css3动画子属性详解 457
- 13.4.1　调用动画animation-name 457
- 13.4.2　设置动画播放时间animation-duration 458
- 13.4.3　设置动画播放方式animation-timing-function 458
- 13.4.4　设置动画开始播放的时间animation-delay 458
- 13.4.5　设置动画播放次数animation-iteration-count 458
- 13.4.6　设置动画播放方向animation-direction 458
- 13.4.7　设置动画的播放状态animation-play-state 459
- 13.4.8　设置动画时间外属性animation-fill-mode 459
13.5　综合案例：全屏slidershow效果 459
13.6　本章小结 464

第14章　媒体特性与responsive设计 465

14.1　媒体类型 465
- 14.1.1　media type设备类型 465
- 14.1.2　媒体类型引用方法 466
14.2　媒体特性 467
- 14.2.1　media query和css属性集合 467
- 14.2.2　常用media query设备特性 468
- 14.2.3　浏览器兼容性 468
- 14.2.4　media query使用方法 468
14.3　responsive布局概念 470
- 14.3.1　responsive设计特点 471
- 14.3.2　responsive中的术语 471
- 14.3.3　responsive布局技巧 473
- 14.3.4　meta标签 474
14.4　本章小结 475

第15章　嵌入web字体 476

15.1　@font-face模块介绍 476
- 15.1.1　浏览器兼容性 476
- 15.1.2　@font-face语法 477
- 15.1.3　使用字体图标的优势 477
15.2　实现@font-face 478
- 15.2.1　使用@font-face自定义字体 478
- 15.2.2　声明字体来源 479
- 15.2.3　创建各种字体 481
- 15.2.4　调用字体 483
15.3　综合案例：将图标转换成web字体 483
- 15.3.1　创建一个图标字体 483
- 15.3.2　准备插图 484
- 15.3.3　导入到icomoon 485
- 15.3.4　从icomoon中导出字体 485
- 15.3.5　下载字体文件 485
- 15.3.6　调用字体 486
15.4　本章小结 486

展开阅读

前言

为什么要写这本书

CSS3是在CSS2.1基础上扩展而来，事实上，它还没有完全成熟。有些专家会告诉你，CSS3现在还用不上，甚至几年之后都不会有成熟的规范发布。

目前为止CSS3还没有一套成熟的规范，其中的模块也在不断更新，特别是浏览器对CSS3特性的支持也在不断变化，同时没有足够的时间去学习和研究W3C官方文档和规范，致使我们学习CSS3变得更为复杂。

为什么会选择这个时候编写这样一本图书呢？原因很简单。对于希望Web应用开发者而言，CSS3可以说是众望所归，这也是技术变更的硬性需求。在实际Web应用中新标准的采纳程度正在以令人目眩的速度不断地变更着，众多浏览器厂商也在不断加快对CSS3新特性的支持。在编写这本图书的过程中，我也被迫不断更新书中的浏览器支持表格。

面对自己正在使用的浏览器，大多数用户并不真正了解其具备的功能有多强大。当然，他们在浏览器自动更新后可能会发现一些细微的界面变化。但他们可能不知道，新版的浏览器对哪些CSS3特性有所支持。

本书的目标是帮助开发者更好地掌握CSS3的特性，并且将新技术运用到实际的开发当中，提高自己开发Web程序的水平。

本书面向的读者

有一定CSS3开发经验的前端工程师。
- 本书能帮助你系统掌握CSS3的各项知识，提升技术水平和业务能力。
从事CSS3开发的前端工程师。
- 由于CSS3涵盖的新特性非常多，在开发过程中将本书作为速查手册，提高开发效率。
前端开发爱好者。
- 如果还不是一名前端工程师，但是对前端开发非常感兴趣，本书也能让你对最新的CSS标准和规范有一个系统和全面的认识，为学习前端知识打下基础。

本书的特色

本书最大的特色就是将CSS3特性按模块功能分类，通过理论、图解、实战的方式向大家阐释CSS3每个特性功能。

内容全面、丰富、翔实。
- 由浅到深地讲解了CSS3新特性的语法、特性以及使用技巧。本书涵盖了CSS3众多功能模块，如CSS3选择器特性、边框模块、文本模块、颜色模块、UI界面模块、CSS3动画模块、CSS新型盒模型以及CSS媒体查询、响应式设计等。
图解方式，直观易懂。
- 图解的方式是本写的最大特色之一，在描述每一个CSS3特性过程都配了生动的实战效果，甚至每一步骤都配有相应的效果图。就算是你对文字理解或者代码理解有所误差，实战效果图能辅助你更好地理解CSS3每个特性。
案例丰富，实战性强。
- 每个CSS3特性都配有实战体验，部分案例来自于实际开发之中。同时在每个知识点之后，还提供了综合案例。通过实践加强动手能力，更好地掌握CSS3中的每个知识点。

动手实践才是掌握一门新技术最有效的途径。如果能在阅读本书的过程中逐一亲手实现这些案例，那么在以后的实际开发中自然就会具有相当强的动手能力了。

本书的内容

本书包括15章，通过实例来演示CSS3模块的新特性。

第1章简单介绍什么是CSS3，CSS3的好处是什么，浏览器对CSS3的支持状况，以及CSS3带来什么新特性，并且引入渐进增强式的概念。通过对本章的学习，大家可以在一定的程度上知道一些CSS3的故事。

第2章介绍CSS3选择器。选择器是CSS中的核心部分之一，本章先阐述CSS2的选择器，再引入CSS3新增的选择器。深入介绍了CSS3新增选择器的功能及其实用性，还有各浏览器的兼容性。

第3章详细介绍CSS3在边框方面新增的功能特性，比如边框色、图片边框、边框圆角等，并与CSS2进行了对比。

第4章介绍CSS3背景功能，着重阐述了多背景、背景尺寸、背景原点方面的使用，以让大家掌握如何使用CSS3背景功能的新特性。

第5章介绍CSS3文本功能。以前大家在网页制作时，只是设置文本的颜色、字体、字号等。通过对CSS3文本功能的学习，大家还可以运用文本阴影、文本溢出、文本换行等功能。

第6章介绍CSS3颜色特性。大家以前只有在设计软件中使用的颜色值现在都可以运用，如RGBA、HSL、HSLA、透明度等。

第7章介绍CSS3基础盒模型与用户界面。盒模型是CSS的重中之重，CSS2盒模型功能只能实现一些基本功能，对于一些特殊的功能需要借助JavaScript来实现。而在CSS3中这一点将得到很大的改善，可以通过CSS3来直接实现一些特殊的功能。

第8章介绍CSS3的弹性盒模型，给大家引入一种全新的布局概念，为大家的页面布局带来革命性的变化。

第9章介绍CSS3多列布局。布局在Web中随处可见，多列布局在CSS2中都是依靠float或者inline-block来实现的，而这两个属性带来的局限性也是相当大的。CSS3多列布局将会弥补这些不足之处。

第10章介绍CSS3渐变功能。渐变效果在Web中也是一种常见的效果，以前靠设计师制作图片来完成，不仅增加了设计师的工作量，在页面中的效果也带来过多的局限制，扩展性也相当差。CSS3渐变不再需要使用图片来代替这些特殊的效果。

第11章介绍CSS3变形功能。这是一个全新的功能，在CSS2中要实现需要借助JavaScript。CSS3的变形功能可以直接使用样式实现如旋转、移位、扭曲、缩放等效果。

第12章介绍CSS3过渡功能。大家在Web制作中，使过渡效果不再生硬，变得细腻、流畅。

第13章介绍CSS3动画功能。

第14章介绍Media Query与Responsive布局。随着移动设备和宽屏浏览器的普及，单一的设计不能满足Web页面的设计需求，此时CSS3的Media Query新特性中出现了一个新的布局概念——Responsive。本章中大家将体会到Media Query与Responsive布局的强大功能。

第15章介绍嵌入Web字体。浏览器仅限于用户在其系统上安装的字体呈现文本。CSS3使用@font-face改变了这一格局。网站不再受限于少量字体，如Arial、Verdana、Times和Georgia等。

如何阅读本书

　　本书结构不是按层进式安排的，章节之间是按CSS3的模块分类，读者阅读本书时无须按照先后顺序进行，可以挑选自己喜欢的章节阅读。但如果按章节的编排顺序逐章阅读，会更系统、更全面地学习CSS3，从中获得最大受益。

阅读本书的案例时，尽量不要照抄书中的代码，在理解案例的设计思路基础上，自己动手开发相似功能的应用，并创造出满足自己需求的功能，举一反三。

本书中使用的约定

本书案例已在主流浏览器上进行过测试了。分别是：Firefox 12.0、Google Chrome 19.0.1084.52、Safari 5.17、Opera 11.64、IE 9。

同时在一些广泛使用的旧版本浏览器（如IE 8）上也做了测试。很多情况下，CSS3的效果也能体现在较低版本上，页面能保持正常阅读，而且效果也不会太差。对于每一个CSS3特性，将尽可能地为低版本浏览器寻求变通的备用方案，使之能兼容那些不被原生支持的浏览器。

针对每个浏览器版本，我们会标注相对应的属性在哪个版本号中开始支持。一些CSS3特性需要添加相应浏览器的渲染引擎的前缀才会生效，我们将会在后面的章节中依次介绍各浏览器的渲染引擎的前缀名称，以及CSS3特性在对应浏览器下的写法。

在阅读本书时有些约定，有必要在这里先说明。

W3C表示万维网联盟（World Wide Web Consortium），是制定Web官方标准和规范（如CSS3）的组织。
初始值（即默认值）是用户不显式声明时元素所具有的属性值。需特别指明的是，属性是元素的本质，而不是用户自定义的属性。
IE 8及以下版本代表IE 8、IE 7和IE 6。
Webkit引擎内核的浏览器是指Safari（包括移动版本和桌面版本）、Google Chrome和其他近期使用版本的Webkit页面渲染引擎的浏览器，其私有属性的前缀是-webkit-。
Gecko引擎内核的浏览器是指Mozilla，常指的是Firefox浏览器，其私有属性的前端缀是-moz-。
Presto引擎内核的浏览器是指Opera，其私有属性的前缀是-o-。
KHTML引擎内核的浏览器是指Konqueror，其私有属性的前缀是-khtml-。
Trident引擎内核的浏览器是指Internet Explorer，其私有属性的前缀是-ms-。

在没有特别声明的情况下，本书所指的浏览器仅适用于Windows系统，不适用于Mac系统和移动端。

偶尔会碰到“所有浏览器”这个说法，此时仅代表目前所有广泛使用的浏览器，而并非字面意义所涵盖的那些可能仅占零星市场份额的不知名的浏览器。

“HTML”指HTML和XHTML这两种语言。

“CSS”指CSS2.1规范，除非特别声明。

本书所有案例代码都是以HTML 5的DTD编写。但这仅仅表示使用短小精悍的HTML 5文档声明(!DOCTYPE html)，还有更简洁的meta字符编码、style和script标签。没有使用任何HTML 5的新标签，比如section、header、nav和article，所以页面可以在IE 8及以下版本正常运行，可以在自己的页面里将其更换为喜欢的标签。所有示例也同样兼容HTML 4.01和XHTML 1.0。

为了方便阅读，本书中的部分案例代码仅提供了CSS样式代码和局部HTML代码，所有CSS实例代码必须置于一个外部样式文件或HTML文档的(head)(/head)标签内。

由于CSS3技术还在不断的完善与更新中，建议根据本书提供的参考地址，获取有关CSS3最新信息与更新。

勘误和支持

由于作者的水平有限，编写时间仓促，书中难免会出现一些错误或者不准确的地方，恳请读者批评指正。为此，我特意创建了一个在线支持站点http://www.w3cplus.com/book-comment.html。大家可以将书中的错误发布在页面的评论中，遇到任何问题，可以留言或者发送邮件到w3cplus@hotmail.com，我将尽量提供最满意的答案。大家还可以关注微信公众账号ednote进入“第三极社区”微社区与广大读者和本书作者互动。书中的全部源文件可以从华章网站（http://www.hzbook.com）下载，我也会将相应的功能及时更正。期待能够得到你们真挚反馈。　　

致谢

首先要感谢好友林小志，是他让我鼓起勇气开始写这本书，也是他一直督促我的进度，并一直鼓励我坚持到最后。同时感谢W3CPlus（http://www.w3cplus.com）社区的所有同学们一直以来对我的默默支持。

感谢机械工业出版社的编辑杨福川给我这样一个机会，在一年多的时间中始终支持我的写作，你的鼓励和帮助引导我能顺利完成全部书稿。同时也要感谢白宇编辑辛苦的付出，帮助我修改书中不足。

感谢我的爸爸、妈妈将我培养成人，并时时刻刻为我灌输着信心和力量！也要感谢我的弟弟，引导我进入这个行业，让我有机会从事喜欢的工作。感谢太太罗群英和儿子一直以来对我的支持，让我有一个安心写作的环境，并给我足够的信心去完成这本拙作。

谨以此书献给我最亲爱的家人、朋友以及众多热爱W3CPlus社区的朋友们！

展开阅读

书摘

第1章揭开CSS3的面纱

如果关注前端方面的技术，那么对CSS一定不会陌生，你肯定听说过CSS3。在使用CSS3之前，应该对这个新一代样式表语言的来龙去脉有个基本了解。

在本章中，你将知道CSS3与CSS2.1的区别，以及当前市面上主流浏览器、移动端浏览器对CSS3支持的情况。对于尚不完全支持CSS3的浏览器，将会为大家引入一个渐进增强的概念，用一些CSS方法来模拟CSS3的实现方法。最后给大家简单介绍一些CSS3引入的新特性及其未来的前景。

1.1什么是CSS3

CSS3并不是一门新的语言。如果接触过CSS就知道，CSS是创建网页的另一个独立但并非不重要的一部分。CSS是种层叠样式表，是一种样式语言，用来告诉浏览器如何渲染你的Web页面。

CSS3是CSS规范的最新版本，在CSS2.1的基础上增加了很多强大的新功能，以帮助开发人员解决一些问题，并且不再需要非语义标签、复杂的JavaScript脚本以及图片，例如圆角功能、多背景、透明度、阴影等功能等。CSS2.1是单一的规范，而CSS3被划分成几个模块组，每个模块组都有自己的规范。这样的好处是整个CSS3的规范发布不会因为部分难缠的部分而影响其他模块的推进。

现在先来看看CSS3激动人心的新特性。

1.1.1CSS3的新特性

CSS3规范并不是独立的，它重复了CSS的部分内容，但在其基础上进行了很多的增补与修改。CSS3与之前的几个版本相比，其变化是革命性的，虽然它的部分属性还不能够被浏览器完美的支持，但却让我们看到网页样式发展的前景，让我们更具有方向感、使命感。

CSS3新特性非常多，这里挑选一些被浏览器支持较为完美、更具实用性的新特性。

1．强大的CSS3选择器

使用过jQuery的人都知道，jQuery的选择器功能强大，使用方便，CSS3选择器和jQuery选择器非常类似。允许设计师通过选择器直接指定需要的HTML元素，而不需要在HTML中添加不必要的类名、ID等。使用CSS3选择器，能在Web的制作中更完美地做到结构与表现分离，设计师能轻松地设计出简洁、轻量级的Web页面，并且能更好地维护和修改样式。

2．抛弃图片的视觉效果

Web中最常见的效果包括圆角、阴影、渐变背景、半透明、图片边框等。而这样的视觉效果在CSS中都是依赖于设计师制作图片或者JavaScript脚本来实现的。CSS3的一些新特性可以用来创建一些特殊的视觉效果，后面的章节将为大家展现这些新特性是如何实现这些视觉效果。

3．背景的变革

如果说CSS中的背景给你带来太多的限制，那么CSS3将带来革命性的变化。CSS3不再局限于背景色、背景图像的运用，新特性中添加了多个新的属性值，例如background-origin、background-clip、background-size，此外，还可以在一个元素上设置多个背景图片。这样，如果要设计比较复杂的Web页面效果，就不再需要使用一些多余标签来辅助实现了。举个例子，要实现CSS中的滑动门效果，在CSS中基本上要添加2～3个额外的标签来辅助实现，那么CSS3中的这些新特性能够在一个标签中完成同等的效果。

4．盒模型变化

盒模型在CSS中是重中之重，CSS中的盒模型只能实现一些基本的功能，对于一些特殊的功能需要基于JavaScript来实现。而在CSS3中这一点得到了很大的改善，设计师可以直接通过CSS3来实现。例如，CSS3中的弹性盒子，这个属性将给大家引入一种全新的布局概念，能轻而易举实现各种布局，特别是在移动端的布局，它的功能更是强大。大家将在第7章、第8章见识它的神功。

5．阴影效果

阴影主要为分两种：文本阴影（text-shadow）和盒子阴影（box-shadow）。文本阴影在CSS中已经存在，但没有得到广泛的运用。CSS3延续了这个特性，并进行了新的定义，该属性提供了一种新的跨浏览器方案，使文本看起来更醒目。盒子阴影的实现在CSS中就有点苦不堪言，为了实现这样的效果，需要新增标签、图片，而且效果还不一定完美。CSS3的box-shadow将打破这种局面，可以轻易地为任何元素添加盒子阴影。

6．多列布局与弹性盒模型布局

CSS3引入了几个新的模块用于更方便地创建多列布局。

“多列布局”（Multi-column Layout）模块描述了如何像报纸、杂志那样，把一个简单的区块拆分成多列，第9章为大家介绍这个模块的运用。“弹性盒模型布局”（Flexible Box Layout）模块能让区块在水平、垂直方向对齐，能让区块自适应屏幕大小，相对于CSS的浮动布局、inline-block布局、绝对定位布局来说，它显得更加方便与灵活。缺点是，这两个模块在一些浏览器中还不被支持，但随着技术的发展革新，这一刻终将到来。

7．Web字体和Web Font图标

浏览器对Web字体有诸多限制，Web Font图标对于设计师来说更奢侈。CSS3重新引入@font-face，对于设计师来说无疑是件好事。@font-face是链接服务器上字体的一种方式，这些嵌入的字体能变成浏览器的安全字体，不再担心用户没有这些字体而无法正常显示的问题，从此告别用图片代替特殊字体的设计时代。

8．颜色与透明度

CSS3颜色模块的引入，实现了制作Web效果时不再局限于RGB和十六进制两种模式。CSS3增加了HSL、HSLA、RGBA几种新的颜色模式。在Web设计中，能轻松实现某个颜色变得再亮一点或者再暗一点。其中HSLA和RGBA还增加了透明通道，能轻松地改变任何一个元素的透明度。另外，还可以使用opacity属性来制作元素的透明度。从此制作透明度不再依赖图片或者JavaScript脚本了。

9．圆角与边框的新法

圆角是CSS3中使用最多的一个属性，原因很简单：圆角比直线性更美观，而且不会与设计产生任何冲突。与CSS制作圆角不同之处是，CSS3无须添加任何标签元素与图片，也不需借用任何JavaScript脚本，一个属性就能搞定。对于边框，在CSS中仅局限与边框的线型、粗细、颜色的设置，如果需要特殊的边框效果，只能使用背景图片来模仿。CSS3的border-image属性使元素边框的样式变得丰富起来，还可以使用该属性实现类似background的效果，对边框进行扭曲、拉伸和平铺等。

10．盒容器的变形

在CSS时代，让某个元素变形是一个可望而不可及的想法，为了实现这样的效果，需要写大量的JavaScript代码。CSS3引进了一个变形属性，可以在2D或者3D空间里操作盒容器的位置和形状，例如旋转、扭曲、缩放或者移位。我们把这些效果称为“变形”，大家将在第11章体验这些新特性。

11．CSS3过渡与动画交互效果

CSS3的“过渡”（transition）特性能在Web制作中实现一些简单的动画效果，让某些效果变得更具流线性、平滑性。而CSS3“动画”（animation）特性能够实现更复杂的样式变化，以及一些交互效果，而不需要使用任何Flash或JavaScript脚本代码。

12．媒体特性与Responsive布局

CSS3的媒体特性可以实现一种响应式（Responsive）布局，使布局可以根据用户的显示终端或设备特征选择对应的样式文件，从而在不同的显示分辨率或设备下具有不同的布局渲染效果，特别是在移动端上的实现更是一种理想的做法。

1.1.2CSS3的发展状况

通过对CSS3新特性的简单介绍，大家可能要问，这些超炫的特性什么时候才能成为标准并最终发布呢？其实CSS3的每一个模块都有它自己的更新（进度表）时间，如图1-1所示，大家可以从这个图上看到CSS3的当前发展的详细进度。

图解css3：核心技术与案例实战

图1-1CSS3所有模块发展进度

Web开发者希望在CSS3标准规范发布之前就能使用这些新特性，而它们的使用还受限于不同的浏览器，只有浏览器完全支持了，才能完全使用这些新特性。

目前，CSS3还不是最终的标准，有很多浏览器支持不够完美，那么现在可以使用CSS3吗？

1.1.3现在能使用CSS3吗

从图1-1中可以看出，CSS3还在不断完善中，很多功能还处于草稿阶段，但部分模块进入了“候选推荐”状态，这说明在Web设计中完全可以使用这些模块。即使有一些模块还处于“工作草案状态”，也可以尝试着使用，只有不断将新的CSS技术运用到实际工作中，才能发现应用这些新技术所面临的真正挑战，以便W3C更好地完善它们，从而更好地、有效地促使它们成为真正的标准。

你应该了解哪些可用，哪些还不能使用。换句话说，在实际工作开发中可以先运用相对稳定的CSS3特性，并确保不会对尚不支持这些特性的浏览器造成影响。做到明智的使用，而不是盲目地滥用CSS3新特性。

1.1.4使用CSS3有什么好处

与CSS相比，使用CSS3有什么好处呢？最明显的就是CSS3能让页面看起来非常炫、非常酷，使网站设计锦上添花，但它的好处远远不止这些。在大多数情况下，使用CSS3不仅有利于开发与维护，还能提高网站的性能。与此同时，还能增加网站的可访问性、可用性，使网站能适配更多的设备，甚至还可以优化网站SEO，提高网站的搜索排名结果。下面介绍CSS3特有的好处。

1．减少开发与维护成本

为什么说CSS3能减少开发与维护的成本呢？先来看一个实例。一个圆角效果，在CSS中需要添加额外的HTML标签，使用一个或者更多图片来完成，而使用CSS3只需要一个标签、一个border-radius属性就能完成。这样，CSS3技术能把你从绘图、切图和优化图片的工作中解救出来。

如果后续需要调整这个圆角的弧度或者圆角的颜色，使用CSS，要从头绘图、切图才能完成，而使用CSS3几秒就完成这些工作。

CSS3还能使你远离一大堆的JavaScript脚本代码或者Flash，你不再需要花大把时间去写脚本或者寻找合适的脚本插件并修改以适配你的网站特效。

最后，有些CSS3技术还能帮你对页面进行“减肥”，让结构更加“苗条”。你不用为了达到一个效果而嵌套很多DIV和类名，这样能有效地提高工作效率、减少开发时间、降低开发成本。例如，制作一个重叠的背景效果，在CSS中需要添加DIV标签和类名，在不同的DIV中放一张背景图，现在可以使用CSS3的多背景和背景尺寸等新特性，在一个DIV标签中完成这些工作。

2．提高页面性能

很多CSS3技术通过提供相同的视觉效果而成为图片的“替代品”，换句话说，在进行Web开发时，减少多余的标签嵌套，以及图片的使用数量，意味着用户要下载的内容将会更少，页面加载也会更快。另外，更少的图片、脚本和Flash文件让Web站点减少HTTP请求数，这是提升页面加载速度的最佳方法之一。而使用CSS3制作图形化网站无需任何图片，极大地减少HTTP的请求数量，并且提升页面的加载速度。当然，这取决于采用CSS3特性来代替什么技术，同样还要看如何使用CSS3特性。例如CSS3的动画效果，能够减少对JavaScript和Flash文件的HTTP请求，但可能要求浏览器执行很多的工作来完成这个动画效果的渲染，这有可能导致浏览器响应缓慢，致使用户流失。因此，在使用一些复杂的特效时，大家需要考虑清楚。不过这样的现象毕竟为数不多。其实很多CSS3技术能够在任何情况下都大幅提高页面的性能。就这一条足以让我们使用CSS3。

1.2浏览器对CSS3的支持状况

CSS3给我们带来众多全新的设计体验，但有一个问题值得考虑——浏览器对CSS3特性的支持情况如何？因为页面最终离不开浏览器来渲染，并不是所有浏览器都完全支持CSS3的特性。有时候花时间写的效果只能在特定的浏览器下有效，意味着只有部分用户能欣赏到，这样的工作变得没有什么意义。例如，使用CSS3制作背景仅在WebKit内核的浏览器下有效果。

想知道用户能够体验到哪些CSS3的新特性，必须了解当前浏览器对CSS3特性的支持程度如何。

1.2.1经典回顾：图说浏览器大战

“浏览器大战”一词在20世纪末产生，网景（Netscape）与微软展开了第一次互联网大战，结果是网景以失败告终，微软荣登冠军宝座。

2004年11月Firefox 1.0诞生，浏览器开始了历史上的第二次大战，IE的地位受到了以Firefox为首的其他浏览器的挑战。2008年12月Google Chrome的诞生，向市场投放了一颗重磅炸弹。此时的IE也开始了版本的升级，虽然IE将版本更新到了IE 8，但面对Firefox和Google Chrome两个强劲的对手，其更新的步伐依然显得太慢，在2010年IE的市场份额跌至50%。而后，Chrome不断更新，其市场份额快速上升。2012年5月，终于夺得浏览器的霸主之位。

这不是浏览器大战的结束，仅仅是IE时代在落幕而已。随着移动设备的风靡，移动版本Safari的市场份额在一年的时间里迅速增长。也许，第三次浏览器大战的战场并不在桌面领域，而是在移动领域。

市面上浏览器品种繁多，从而引发浏览器的市场大战，这场战争持续了近二十年，但从未有结束战争的趋势。浏览器之争提示了Web浏览器的影响，比如Chrome和Firefox对浏览器霸主IE发起的挑战，随着移动终端的出现，另一个强有力的竞争者——移动Safari网络浏览器也加入这场无休止的浏览器之战。下面一起来看看monetate.com绘制的浏览器战争图，如图1-2所示。

图解css3：核心技术与案例实战

1.2.2浏览器的市场份额

图1-2所示只是主流浏览器的市场之争，国内还有许多国产的浏览器，例如QQ浏览器、奇虎360浏览器、移动端的UC浏览器等。用户在使用什么样的浏览器，这个使用率始终无法准确地掌握，因为这个概率始终都在变化，下面详细看看国内和全球浏览器的市场份额。

1．浏览器国内市场份额

首先关注国内浏览器的市场份额，一起来看百度统计的浏览器市场份额图，如图1-3所示。

图解css3：核心技术与案例实战

国内浏览器市场位列三甲的分别是IE 6.0、奇虎360和IE 7.0，三个版本的浏览器流量份额占据总市场份额的61.1%左右，但IE 6～8在国内依然处于绝对领先态势，但相比两年前，IE浏览器在国内也步入下滑的态势，这给前端开发人员带来一丝的希望。更值得庆幸的是，360浏览器在5月发起了狙击IE 6浏览器的活动，并开始在最新版本的360安全浏览器中内置了IE 8内核，这无疑给国内的前端工程师带来了一丝清凉。

2.浏览器全球市场份额

2012年5月可以说是浏览器厂商激烈竞争的一个月，一度报出Google Chrome浏览器全球份额首次超越IE浏览器，夺得浏览器全球霸主之位。全球浏览器市场份额发生了哪些变化呢？首先看StatCounter的统计数据，如图1-4所示。

图1-4中数据显示，在2012年5月，IE浏览器已失去了浏览器的霸主之位，被Chrome取代，Firefox也在市场上位居第三。如果将其他版本的Firefox、Chrome、Safari和Opera加在一起计算，IE所占的市场份额确实已少于这些符合标准的现代浏览器。通常，我在自己站点上发布一个新的CSS3技巧时，很多朋友会问：“它在IE浏览器上能运行吗？效果又是什么样？”根据图1-4的显示结构，是不是应该换一种思维，是不是询问“这个效果在Firefox上看起来怎么样”更有意义呢？

那么是不是可以忽略IE 呢？其实不然，IE虽然在全球市场份额不再是霸主，但在国内它依然是主流，特别是IE 6依然占有半壁江山，这也致使我们不能不考虑使用IE的用户群。

图解css3：核心技术与案例实战图1-4主流浏览器市场份额（2012年1月～2012年6月）

制作一个网站，其内容应该在任何浏览器上都是可用的，不应该忽略或抛弃某些用户。虽然制作一个令人满意的Web页面不是一件难事，但是为了一个渐渐消失的用户群体花费大量的时间与成本确实不是一个明智之举。

正如前面所讲，CSS3对网站意义何在，应该是由用户群体来确定，而不是由浏览器的市场份额所决定。换而言之，除非网站统计结果与这个结果有很大的出入，否则就不应该继续认为非IE用户仅仅是个不需要特别关注的边缘化群体。在非IE浏览器与IE浏览器上花费的时间同样重要。而CSS3能很容易地让网站在非IE浏览器下更棒，而且少数情况之下这些CSS3属性也适合IE浏览器。

1.2.3主流浏览器对CSS3支持状况

幸运的是，CSS3特性大部分都已经有了很好的浏览器支持度（后面在讲每个CSS3特性之时，会列出各浏览器对其支持情况）。各大主流浏览器对CSS3的支持越来越完善，曾经让多少前端开发人员心碎的IE也开始挺进CSS3标准行列。当然，即使CSS3标准制定完成，现代浏览器要普及到大部分用户也是一个相当漫长的过程。如果现在就要使用CSS3来美化你的站点，有必要对各大主流浏览器对其新技术的支持情况有一个全面的了解。

本节分别在Mac和Windows两个平台介绍Chrome、Firefox、Safari、Opera和IE五大主流浏览器对CSS3新特性和CSS3选择器的支持情况。

1．主流浏览器对CSS3属性的支持状况

图1-5所示是findmebyIP为五大主流浏览器对CSS3属性支持状况的统计图。

从图中可以看出，CSS3中的Overf?low Scrolling属性还没有浏览器支持，其他属性在Mac系统下，Chrome、Safari都支持，其次支持较好的是Firefox和Opera。而在Windows系统下，WebKit内核浏览器表现的非常优秀，其次是Firefox和Opera。同时IE也迎头追赶，在IE 9中支持部分CSS3特性。据说，IE 10将会更完美地支持CSS3。

图解css3：核心技术与案例实战图1-5主流浏览器对CSS3属性支持状况

2．主浏览浏览器对CSS3选择器的支持状况

图1-6所示是findmebyIP为五大主流浏览器对CSS3选择器的支持状况统计图。值得高兴的是，图中除了IE 6～8有“×”之外，其他浏览器都是“√”，全部支持CSS3选择器。

从图1-5和图1-6中可以清楚地知道，无论是在Mac系统下还是在Windows系统下，Google Chrome和Safari对CSS3特性的支持度是最好的，而IE系列是最差的，特别是IE 6～8。原因很简单，IE 6～8发布于CSS3完善之前。

差别各异的浏览器致使页面在不同的浏览器之中渲染并不一致。特别是在当今这个信息发达的时代，设备、屏幕、浏览器的形态越来越丰富，人们的习惯设置也不尽相同，因此想再创造一个在任何地方都表现一致的页面就更加的不可能。只要你关注如何提供实用、易用、好用的页面，这点表面上的差异就显得不重要。而这种想法就是接下来要介绍的“渐进增强”。

图解css3：核心技术与案例实战

图1-6主流浏览器对CSS3选择器的支持状况

1.3渐进增强

第一次听到“渐进增强”（Progressive Enhancement）一词是在前端重构交流会上。渐进增强并不是一种技术，而是一种开发的方式，更是一种Web设计理念。首先思考一个问题：“网站是否需要在每个浏览器中看起来都一样？”带着这个问题来看渐进增强。

1.3.1渐进增强与优雅降级

正如前面所言，渐进增强是一种开发方式，更是一种设计理念。在编写Web页面时，首先保证最核心的功能实现，让任何低端的浏览器都能看到站点内容，然后考虑使用高级但非必要的CSS和JavaScript等增强功能，为当前和未来的浏览器提供更好的支持，给用户带来更好的体验。

在设计的时候，先考虑低端设备用户能否看到所有内容，然后在此基础之上为高端用户进行设计。不仅为高端设备用户提供一个完美的应用，也要为不同性能级别设备的用户设计不同级别的不那么完美的应用。这称为“优雅降级”。

目前而言，虽对“渐进增强”有所了解的人很多，但是要说普及或深入还远远没到时候。在大家平时的设计思维中有一种极强的固定思维，也就是想让网站在各个浏览器下表现一致。这种出发点本身并没有什么问题，但是这样会让领先的浏览器的优势无法充分显示出来。

因此，从今天开始要改变制作Web站点的思维，让网站能优雅降级，目标应该是——向尽可能多的用户提供尽可能优质的用户体验。这跟用户访问网站使用方式无关，无论通过iPhone、高端的桌面系统、Kindle，还是阅读器，用户都能得到尽可能独特且完美的体验。

1.3.2渐进增强的优点

“向尽可能多的用户提供尽可能优质的用户体验”这一目标听起来相当不错。有的人制作Web站点时报怨，IE怎样才具有CSS3的效果。诚然，我们不使用渐进增强也可以实现，如为一些旧浏览器提供一套兼容方案，确保页面与现代浏览器保持一致。简单来说就是在支持CSS3的浏览器中使用CSS3特性，在不支持的浏览器中另写一套样式来模拟CSS3效果，实现让网站在所有浏览器都一样。

可以说，通过这种方法只是让低版本的浏览器渲染页面更好看一点，并没有得到实质性的提高。

因此，如果网站始终无法做到一模一样，为什么不使用CSS3技术使它在现代浏览器上看起来更靓丽呢？当然，某些CSS3特性在不支持的浏览器中是“无法模拟”的，但使用渐进增强，就无须为了让网站适合所有人而放弃这些技术。

CSS的渐进增强有别于CSS的hack。hack是浏览器厂商的一种手法，用来增强自己的竞争，而渐进增强起到锦上添花之效。所以前者应该尽量避免使用，而后者应该适当使用。

就样式而言，渐进增强的对象是一些现代浏览器，渐进增强的一些属性主要是CSS3的一些特性，或是IE低级版本不支持的一些属性，或是其他一些特殊情况。淘宝网上的一个例子如图1-7所示。

图解css3：核心技术与案例实战

这里采用了CSS3的旋转特性transform，鼠标移上去时，三角会实现旋转的动画效果，并改变方向。之前，要实现图1-7所示的旋转效果，需要一大串JavaScript脚本。而使用transform仅仅需要几行代码。

　　#site-nave .menu:hover .menu-hd { 
    　　-webkit-transform: rotate(180deg); 
    　　-webkit-transform-origin-x:50%; 
    　　-webkit-transform-origin-y:30%; 
    　　-moz-transform: rotate(180deg); 
    　　-moz-transform-origin-x:50%; 
    　　-moz-transform-origin-y:30%; 
    　　-o-transform: rotate(180deg); 
    　　-o-transform-origin-x:50%; 
    　　-o-transform-origin-y:30%; 
    　　-ms-transform: rotate(180deg); 
    　　-ms-transform-origin-x:50%; 
    　　-ms-transform-origin-y:30%; 
    　　transform:rotate(180deg); 
    　　transform-origin-x: 50%; 
    　　transform-origin-y: 30%; 
    　　}

采用渐进增强能给现代浏览器用户一个更好的体验，在不支持CSS3的IE浏览器也能正常使用，只不过体验会大打折扣。

以上只是一个简单的例子，本书后面还会介绍CSS3渐进增强的案例，例如text-shadow文字阴影、border-radius圆角属性、box-shadow盒阴影属性、CSS3渐变背景和CSS3选择器等。

1.4CSS3的现状及未来

了解到使用CSS3会带来很多好处，哪些网站在使用CSS3？这很容易，打开计算机随处可见。既然这样，就一起来看几个网站吧。

1.4.1谁在使用CSS3

首先看看新浪微博，其中最明显的是圆角的应用，在发表评论的地方还使用了内阴影属性，如图1-8所示。

图解css3：核心技术与案例实战

Google的UI也使用了大量CSS3特性，看主版面的Button效果，这个按钮使用了CSS3的阴影、圆角和渐变三种属性，如图1-9所示。

图解css3：核心技术与案例实战

图1-9Google的按钮效果

接下来介绍的Twitter网站（http://twitter.com）可以说把CSS3运用得出神入化，登录界面如图1-10所示。

图解css3：核心技术与案例实战

整个界面都是使用CSS3完成的，没有使用任何图片、背景渐变、圆角、文本框发光效果等。这些都是CSS3特性的一气呵成，这不得不让我们为CSS3强大的特性折服。

国内外使用CSS3特性制作网站的案例越来越多，特别是一些优秀的个人站点，更是运用得出神入化。

1.4.2CSS3的未来

CSS3无疑对Web前端开发带来质的飞跃。虽然目前CSS3还没有完全普及，而且浏览器也不完全支持，但对于我们积极地去学习和实践并不矛盾，掌握和学习CSS3将是大势所趋。CSS3将是引导我们进入编写网页精彩世界的先驱技术。开发人员能够更轻松地创建功能强大、易于维护网站。

随着旧版浏览器所占市场份额逐渐减少，学习CSS3技术将更有价值。这是作为一位优秀前端开发人员所必须掌握的技术之一，也是前端开发人员的大势所趋。

当然，学习一门新技术不能跟风，需要理性思考，这种理性思考并不表示对新技术的畏缩，同时也应该明白学习新技术可能会遇到的困难和风险。只有这样，才能更好地驾驭CSS3。

1.5本章小结

本章主要介绍了什么是CSS3、CSS3的发展状况、新特性，以及浏览器对CSS3的支持状况；同时，引进了渐进增强的设计理念。通过本章的学习，可以对CSS3有一个初步的了解。学习CSS3的好处有很多，它能让你始终处于Web设计的前沿，增加你的职业技能和竞争力，还能帮助你缩短与顶级设计师或开发者的距离。马上开始使用，然后不断磨砺你的技巧并在职业的道路上不断前进。

展开阅读