全书一共分为9章，首先从宏观上介绍了CSS 3技术的最新发展现状、新特性，以及现有的主流浏览器对这些新特性的支持情况；然后详细讲解了CSS 3的选择器、文本特性、颜色特性、弹性布局、边框和背景特性、盒模型、UI设计、多列布局、圆角和阴影、渐变、变形、转换、动画、投影、开放字体、设备类型、语音样式等重要的理论知识，这部分内容是本书的基础和核心。不仅每个知识点都配有丰富的、精心设计的实战案例，而且详细介绍了每一种新特性在各种主流浏览器上的兼容性，旨在帮助设计师们提高设计的安全性。
本书全彩印刷，排版、设计和装帧也非常精美，既适合学习参考，也适合收藏。无论你是前端领域的新人，还是有着丰富经验的老手，都能通过本书系统而全面地学习和实践CSS 3的最新技术，为迎接新一轮的Web技术革命打下坚实的基础。
对于前端设计师来说，虽然CSS 3不是全新的技术，但它却重启了一扇奇思妙想的窗口。CSS 3全新的功能和特性在赋予了Web设计美好的愿景和无限可能性的同时，也极大地提高了Web设计的效率。例如，设计师们从此不再需要使用蹩脚的JavaScript脚本，或者“偷梁换柱”地使用图片或标签去实现圆角、多背景、自定义字体、3D动画、渐变、阴影、透明度等页面效果。
技术本身并没有生命，但是它所折射的光芒却让人看到创新的希望。在选择器上，CSS 3支持更复杂的属性选择器和更高级的组合选择器，这些丰富的功能让设计师们可以灵活地控制网页样式，不用担心因为选择了某些元素而破坏文档结构，如随意增加类和ID值等。在样式设计上，CSS 3支持圆角效果、阴影效果、透明效果、渐变效果、变换效果、过渡效果、动态效果、动画效果、倒影效果、文本特效、边框特效、真彩色、透明色、渐变色、背景色，等等。在CSS 3之前，所有这些效果可能需要设计师们花费大量的时间使用背景图像或者JavaScript脚本来实现。
作为一个Web前端工作者，积极地关注和学习最新的Web标准是很重要的。互联网的发展总是在不断地催生新技术的出现，CSS 3技术的应用和普及才刚刚起步，一些新的功能和特性还在不断的尝试和实践中。也许你正被 各种关于CSS 3的唇枪舌战所困扰，还在为 CSS 3的兼容性问题而担忧，新技术的普及 总会有一个过程，最早的CSS 1如此，后来的CSS 2也是如此，如今的CSS 3同样如此。立足现实，着眼未来，从现在就开始学习并付诸实践，最后微笑的必定是你。
国内首本CSS 3专著，全面而深入讲解CSS 3的最新特性和布局之道
实战性强，全书囊括近百个精心设计的实战案例，理论与实践完美结合
资深Web前端工程师多年实践经验的结晶，3大社区联袂推荐
虽然CSS 3的标准制定工作早在10年前就开始了，但直到近一两年才逐渐开始得到各主流浏览器的支持。与CSS 2.x相比，CSS 3在各方面都有非常大的改进，不仅功能更强大，而且也更便于Web前端工作者使用。如果你是一位前端工作者，或将来打算进入前端领域，建议你从现在就开始学习CSS 3。本书不仅全面而系统地讲解了CSS 3的所有新功能和新特性，而且还精心设计了数十个经典的案例，实战性极强。本书将是当下深入而系统学习CSS 3的最佳选择！
——CSS 3研究小组
HTML 5和CSS 3是Web开发领域当下最热门的话题之一，二者必定会掀起一场革命，未来的Web世界将由它们来主宰。本书可谓极具前瞻性，而且出版时机也恰到好处，应该能为CSS 3在国内的发展和普及做出一定的贡献。它不仅在与CSS 2.x进行对比的基础上全面讲解了CSS 3的方方面面，而且还包含大量的实战案例和最佳实践。此外，本书全彩印刷，装帧和版式设计都非常精美，不仅有学习价值，而且还有收藏价值。强烈推荐。
——CSS开发者社区
随着各种新型Web应用的出现，以及用户对用户体验的要求的不断提高，各大主流浏览器都开始将CSS 3 作为一种事实标准的解决方案，相应地，CSS 3自然而然也将成为Web前端工作者的必修课之一。如果你是一位有远见的前端工作者，那就从现在开始学习和实践CSS 3吧，相信这本书会给你惊喜。
——HTML51 (www.html51.com)
作 者 简 介
成 林 资深Web前端工程师，从事Web前端工作多年，精通CSS、HTML、JavaScript、jQuery和Ajax等Web前端技术，在实践中积累了大量的经验。推崇Web技术标准，曾经在多所高等院校和一些线下技术沙龙主讲Web标准和规范相关的课程，曾经还参与过W3C组织的标准化文档的中文编译工作。近两年来，集中精力研究和实践CSS 3和 HTML 5前沿技术，是国内该领域的先驱者之一，已经有较为深入的认识和丰富的实践经验。
为什么写这本书
CSS 3真可谓十年磨一剑，从10年前开始孕育，到今天逐渐引人瞩目，前端工作者们的确等待了太长的时间。
随着用户要求的不断提高、各种新型网络应用的不断出现，以及Web技术自身的高速发展，CSS 2在Web开发中显得越来越力不从心，人们对下一代CSS技术和标准—CSS 3的需求越来越迫切。坦率地讲，CSS 3的部分特性在几年前就已经公布，但是由于各种主流浏览器的“不作为”，特别是IE浏览器的“消极态度”，让很多前端工作者遗忘了CSS 3的存在。目前，CSS 3还在不断完善中，很多功能还处于草稿阶段，但是它展现出来的超强特性和功能已经让人兴奋不已。最近一两年，各种主流浏览器逐渐开始高调支持CSS 3的部分或者全部的功能特性，使得CSS 3又重新进入了广大前端工作者的视野。特别是IE 9对CSS 3的全面支持，更是将网页设计师带入了全新的天地。社区里各种关于CSS 3的讨论、资料和炫酷的应用开始爆炸式增长，广大前端工作者也开始蜂拥而至。
对于紧追前沿技术的前端工作者来说，充分了解当前和未来的Web标准和技术是十分必要的，学习和掌握CSS 3更是大势所趋。为了帮助大家在适应趋势和引领趋势的过程中能走得更顺利，受机械工业出版社华章分社的盛情邀请，我特意编写了这本CSS 3实战教程，希望能起到抛砖引玉之效，为普及CSS 3尽绵薄之力。
本书面向的读者
首先，本书非常适合具有丰富开发和设计经验的前端工作者，因为这部分读者应该已经对CSS 2了然于胸，通过本书，他们将能非常迅速而又有针对性地掌握CSS 3技术。
其次，本书也适合尚处于初级阶段的前端工作者，因为书中不仅系统而全面地介绍了CSS 3的各种功能和特性，而且还有大量实战案例和最佳实践，可供他们一边学习理论，一边进行实战演练。
本书内容特色
本书是国内第一本系统、全面地讲解CSS 3的图书，它有两个重要的特色：
内容全面而详尽。本书几乎讲解了CSS 3已经公布的所有可用新特性和新功能的用法、技巧和注意事项。
案例丰富，实战性强。本书几乎为每个知识点都精心设计了1~2个实战案例，能帮助读者在实战演练的过程中将理论知识融会贯通。
本书约定
在本书的阅读过程中，需要注意下面几个约定：
初始值：即默认值，是当用户不显式声明时元素所显示的属性值。需指明的是，属性是元素的本质，而不是后天定义的标签。
适用于：说明了该属性适用哪些元素，有些参考资料中所提供的适用元素列表很容易使读者陷于迷茫之中，指导意义不大，妨碍快速参考。
继承性：这是CSS的基本特性，表明该属性值是否会对当前引用元素的内嵌子元素具有影响力。继承性对CSS布局而言具有重要的参考价值。
百分比：表示该属性是否可以用百分比（%）或者em为单位，以及如果可以用百分比或者em为单位时，如何才能把这些值换算成确定的值。例如，百分比是根据自身的宽度进行换算还是根据父元素的宽度进行换算，再或者是根据元素内文本字体的大小进行换算等。默认值为N/A ，表示百分比不符合或者不可用。
媒介：说明该属性适用于哪些设备，例如，visual表示视觉媒体，如电脑屏幕、WAP（如手机）屏幕、打印机等。
在没有特别声明的情况下，本书所指的浏览器仅适用于Windows系统，不适用于Mac系统。
Webkit引擎主要指苹果的Safari浏览器和谷歌的Chrome浏览器，其私有属性前缀为-webkit-。
Gecko引擎主要指代Mozilla的浏览器，常指Firefox，其私有属性前缀为- moz。
Presto引擎主要指代Opera浏览器，其私有属性前缀为-o-。
本书所有案例在Chrome 4.0+或者Safari 4.0+版本的浏览器中能够获得较好的表现。在IE 8及其以下的版本中，可能得不到预期的效果。
为了方便阅读，本书中的部分示例代码仅提供了CSS样式代码和局部HTML结构代码，读者可以把这些CSS样式代码放在网页头部区域（即
本书不是最终的CSS 3技术大全，CSS 3技术还在不断完善和补充中，所以也无法确保本书中讲解的所有知识将来都不会发生变化。建议读者根据本书所提供的参考地址，即时获取关于CSS 3的最新信息。
CSS 3技术学习延伸
学习CSS 3实际上并不难，难的是完全了解浏览器的兼容性问题。在还没有完全普及CSS 3标准之前，我们只能够根据各主流浏览器引擎所实现的CSS 3私有特性来实现兼容。这势必会导致将简单的问题复杂化，学习的成本和应用的难度也会相应增加。这一方面是因为很多CSS 3属性使用比较烦琐，如转换、过渡、渐变等，另一方面是因为设计时还要考虑各浏览器厂商的扩展（兼容方法）。对于广大前端工作者来说，下面这些参考资料也许会非常有用。
CSS 3 Selectors Test：这是CSS 3.info网站提供的CSS选择器测试页面，它能够详细显示当前浏览器对所有CSS 3选择器的支持情况。启动测试，浏览器会自动测验，并以列表的方式显示当前浏览器对所有CSS 3选择器的支持情况，点击每个CSS 3选择器可以查看结果和解释信息。
When can I use：这是一个专业的测试网站，为广大网页设计师提供CSS 3、HTML5、SVG、JavaScript API技术的浏览器支持情况检测，它能够准确显示什么时候能用CSS 3、HTML5、SVG，以及其他即将可用的页面技术的浏览器兼容性列表。
What抯 my IP：这也是一个专业的小网站，可用于检测当前浏览器对CSS 3、HTML5、Forms 2.0、CSS 3选择器和Script等技术的支持情况。
MooTools HTML5/CSS 3 feature detection：Modernizr是一个很有用的JavaScript库，可以检测HTML 5和CSS 3的原生支持，并提供一种维护良好控制级别的方法。如果你喜欢使用MooTools，可以使用MooModernizr（MooTools 版本的Modernizr）。
CSS 3 Generator：这是一个CSS生成器，可以快速地以可视化的方式生成CSS 3新特性的样式，不过该工具仅支持border radius、box shadow、text shadow、RGBA、@font-face、多列、box resize、box sizing 和outline特性，其他特性暂不支持。
CSS 3 please!：这是跨浏览器的CSS规则生成器，支持border-radius、box-shadow、渐变（线性）、rgba色彩、transform （旋转）、transition和@font-face。
CSS 3 Sandbox：提供了几个CSS 3生成器，包括线性渐变、放射渐变、文字阴影、盒阴影、Transforms和文字描边。
CSS 3渐变生成器：为Firefox和Webkit浏览器生成线性渐变。
@font-face 生成器：来自于Font Squirrel的很好用的CSS 3 @font-face生成器。
CSS 圆角生成器：生成用于Firefox、Webkit和标准CSS 3语法的border-radius属性。
CSS 3.0 参考手册：这是由腾讯ISD WebTeam制作的一个CHM文档，由于时间较早，稍显陈旧，错误和遗漏比较多，不过对想了解CSS 3基本特性的初学者来说，还是有一定的参考价值。
致谢
本书主要由成林编写，同时参与资料整理及编写的还有：马本连、吴建华、江淑军、李斌、李经键、郑伟、田蜜、陆颖、王慧明、张炜、陈锐、王幼平、杨龙贵、苏震巍、崔鹏飞等，在此对大家的辛勤工作表示衷心的感谢！
由于时间有限，书中难免会有疏漏和不足之处，恳请广大读者提出宝贵意见。有关本书的任何问题，请发电子邮件到css3shizhan@163.com。
作者
2011年3月于北京
计算机\Web设计
虽然CSS 3的标准制定工作早在10年前就开始了，但直到近一两年才逐渐开始得到各主流浏览器的支持。与CSS 2.x相比，CSS 3在各方面都有非常大的改进，不仅功能更强大，而且也更便于Web前端工作者使用。如果你是一位前端工作者，或将来打算进入前端领域，建议你从现在就开始学习CSS 3。本书不仅全面而系统地讲解了CSS 3的所有新功能和新特性，而且还精心设计了数十个经典的案例，实战性极强。本书将是当下深入而系统学习CSS 3的最佳选择！
——CSS 3研究小组
HTML 5和CSS 3是Web开发领域当下最热门的话题之一，二者必定会掀起一场革命，未来的Web世界将由它们来主宰。本书可谓极具前瞻性，而且出版时机也恰到好处，应该能为CSS 3在国内的发展和普及做出一定的贡献。它不仅在与CSS 2.x进行对此的基础上全面讲解了CSS 3的方方面面，而且还包含大量的实战案例和最佳实践。此外，本书全彩印刷，装帧和版式设计都非常精美，不仅有学习价值，而且还有收藏价值。强烈推荐。
——CSS开发者社区
随着各种新型Web应用的出现，以及用户对用户体验的要求的不断提高，各大主流浏览器都开始将CSS 3作为一种事实标准的解决方案，相应地，CSS 3自然而然也将成为Web前端工作者的必修课之一。如果你是一位有远见的前端工作者，那就从现在开始学习和实践CSS 3吧，相信这本书会给你惊喜。
——HTML51（www.html51.com）
作者简介
成林 资深Web前端工程师，从事Web前端工作多年，精通CSS、HTML、JavaScript、jQuery和Ajax等Web前端技术，在实践中积累了大量的经验。推崇Web技术标准，曾经在多所高等院校和一些线下技术沙龙主讲Web标准和规范相关的课程，曾经还参与过W3C组织的标准化文档的中文编译工作。近两年来，集中精力研究和实践CSS 3和 HTML 5前沿技术，在国内是该领域的先驱者之一，已经有较为深入的认识和丰富的实践经验。
说明：与《HTML 5与CSS 3权威指南》一样，在封底加上HTML51的logo和联合策划字样，谢谢。
成林 著：暂无简介
前言
第 1 章 预览激动人心的CSS 3 1
1.1 CSS 3发展概述 1
1.2 CSS 3模块化简介 2
1.3 CSS 3新特性概览 4
1.4 主流浏览器对CSS 3的支持 8
1.5 CSS 3的未来和思考 9
第 2 章 CSS 3新增的选择器 11
2.1 属性选择器 13
实战体验：文档共享的友善之举 14
2.2 结构伪类选择器 17
实战体验1：设计优雅的数据表格 19
实战体验2：CSS大战保龄球 21
实战体验3：让枯燥的列表更有趣 27
实战体验4：清理圆角边框中的垃圾标签 29
2.3 UI元素状态伪类选择器 33
实战体验1：设计可用的表单 36
实战体验2：设计友好、易用的表单 40
2.4 其他新增选择器 45
实战体验1：设计层序化的数据表格 47
实战体验2：改善页内导航的视觉体验 50
第3章 增强的文本和颜色功能 54
3.1 文本阴影—text-shadow属性 56
实战体验：设计超酷的黑猫警长首页 62
3.2 溢出文本省略—text-over flow属性 64
实战体验：设计固定区域的新闻列表 66
3.3 文本换行显示—word-wrop属性 67
实战体验：防止表格标题行换行 71
3.4 CSS 3文本模块解析 73
3.5 CSS 3不同版本之间的文本规范的差异 79
3.6 HSL色彩模式 80
实战体验：网页配色解决方案表 81
3.7 HSLA色彩模式 86
实战体验：模拟渐变色条 87
3.8 RGBA色彩模式 88
实战体验：设计带阴影边框的表单 88
3.9 不透明度—opacity属性 90
实战体验：设计灯箱广告背景布 91
第4章 新增的弹性盒模型 93
4.1 定义盒子的布局取向—box-orient属性 95
实战体验：设计多栏布局 96
4.2 定义盒子的布局顺序—box-direction属性 99
实战体验：反向布局网页 100
4.3 定义盒子布局位置—box-ordinal-group属性 101
实战体验：垂直网页布局 102
4.4 定义盒子的弹性空间—box-flex属性 104
实战体验：自适应栏目宽度设计 105
4.5 管理盒子的空间—box-pack和box-align属性 109
实战体验：自适应布局居中设计 111
4.6 空间溢出管理—box-lines属性 115
实战体验：让子元素分行显示 115
4.7 弹性布局综合实战—打造新技术含量的博客 117
4.7.1 构建博客页的基本结构 117
4.7.2 完善博客页的结构 118
4.7.3 弹性布局设计 119
第5章 完善的盒模型和UI设计 124
5.1 定义多色边框—border-color属性 124
实战体验：设计立体边框 127
5.2 定义边框背景图—border-image属性 128
实战体验：设计各种精巧的边框 138
5.3 设计圆角—border-radius属性 140
5.4 设计块阴影—box-shadow属性 147
5.5 CSS 3边框和背景样式综合实战 151
5.6 设计多重背景图象—background属性 155
实战体验：背景图像合成 157
5.7 定义背景坐标原点—background-origin属性 158
实战体验：设计信纸背景效果 159
5.8 定义背景裁剪区域—background-clip属性 160
实战体验1：设计内容区背景 163
实战体验2：设计按钮效果 163
5.9 定义背景图像大小—background-size属性 164
实战体验：设计自适应模块大小的背景图像 165
5.10 溢出内容处理—overflow-x和overflow-y属性 166
5.11 定义盒模型解析模式—box-sizing属性 170
5.12 自由缩放—resize属性 171
实战体验：设计能随意调整大小的壁画 172
5.13 定义外轮廓线—outline属性 173
实战体验：设计醒目激活和焦点提示框 175
5.14 定义外轮廓线宽度—outline-width属性 177
5.15 定义外轮廓线样式—outline-style属性 178
5.16 定义外轮廓线颜色—outline-color属性 179
5.17 定义外轮廓线位移—outline-offset属性 179
实战体验：放大激活和焦点提示框 180
5.18 定义导航序列号—nav-index属性 181
实战体验：调整表单输入框的键盘激活顺序 182
5.19 定义方向键控制顺序 184
实战体验：正确定义键盘控制键顺序 185
5.20 为元素添加内容—content属性 187
第6章 CSS 3多列布局 190
6.1 定义多列布局—columns属性 190
实战体验：设计文章多栏显示 191
6.2 定义列宽度—column-width属性 192
实战体验：设计固定宽度的栏目版面 193
6.3 定义列数—column-count属性 194
实战体验：设计固定列数的版面 195
6.4 定义列间距—column-gap属性 196
实战体验：设计疏朗的文档版面 197
6.5 定义列边框样式—column-rule属性 198
实战体验：为多列布局版面设计边框效果 200
6.6 定义跨列显示—column-span属性 201
实战体验：设计文章标题跨列显示 202
6.7 定义栏目高度—column-fill属性 203
实战体验：设计不等高的多列布局效果 204
6.8 分列打印 206
6.9 结合案例实战—设计精美的多列网页版式 207
第7章 CSS 3渐变设计 217
7.1 Webkit引擎的CSS渐变实现方法 217
7.1.1 基本语法 218
7.1.2 直线渐变的基本用法 218
7.1.3 径向渐变的基本用法 220
7.1.4 渐变的其他应用 225
7.2 Gecko引擎的CSS渐变实现方法 227
7.2.1 直线渐变基本语法 227
7.2.2 直线渐变的基本用法 227
7.2.3 径向渐变基本语法 230
7.2.4 径向渐变的基本用法 231
7.2.5 渐变的应用 234
7.3 IE浏览器引擎的CSS渐变实现方法 235
7.3.1 基本语法 235
7.3.2 IE渐变滤镜实战应用 236
7.4 W3C标准化的CSS渐变实现方法 238
7.5 CSS 3渐变实战 239
7.5.1 CSS渐变下拉菜单 239
7.5.2 CSS渐变按钮 243
第8章 CSS 3动画设计 248
8.1 CSS变形（Transformation） 248
8.1.1 变形基础—transform属性 249
实战体验：设计一个简单的鼠标动画 250
8.1.2 旋转动画—rotate()函数 251
8.1.3 缩放动画—scale()函数 253
8.1.4 移动动画—translate()函数 255
8.1.5 倾斜动画—skew()函数 258
8.1.6 矩阵变形动画—matrix()函数 260
8.1.7 CSS 3实战体验：设计图片墙 262
8.2 CSS变形原点—transform-origin属性 265
CSS3实战体验：定义图片旋转的原点 265
8.3 CSS过渡—transition属性 268
8.3.1 设置过渡的CSS属性—transition-property属性 269
8.3.2 设置过渡的时间—transition-duration属性 270
8.3.3 设置过渡延迟时间—transition-delay属性 271
8.3.4 设置过渡效果—transition-timing-function属性 272
CSS 3实战体验：设计OS X Dock（OS系统的导航码头） 274
8.4 CSS动画—animation属性 276
8.4.1 设置CSS动画名称—animation-name属性 277
8.4.2 设置CSS动画时间—animation-duration属性 278
8.4.3 设置CSS动画播放方式—animation-timing-function属性 278
8.4.4 设置CSS动画开始播放的时间—animation-delay属性 279
8.4.5 设置CSS动画播放次数—animation-iteration-count属性 279
8.4.6 设置CSS动画播放方向—animation-direction属性 280
CSS 3实战体验：设计自动翻转的图片效果 280
8.5 CSS 3动画综合实战 282
8.5.1 设计动态立体盒子 282
8.5.2 设计CSS 3手风琴式折叠面板 285
8.5.3 设计能够旋转背景的易拉罐 287
8.5.4 设计旋转出仓的光盘动画效果 290
第9章 CSS 3新增的其他功能 295
9.1 引用外部字体类型—@font-face规则 296
9.1.1 @font-face规则的用法 296
实战体验：设计艺术字体 297
9.1.2 关于开放字体格式 298
9.2 定义CSS设备类型—Media Queries 299
9.2.1 @media规则的用法 300
实战体验：为不同设备设计不同的盒子框样式 302
9.2.2 使用Media Queries链接外部CSS文件 304
9.2.3 测试Media Queries 305
9.3 定义投影—CSS Reflections 305
CSS实战体验：应用CSS Reflections 306
9.4 定义语音样式—CSS 3 Speech 310
实战体验：体验CSS 3 Speech应用 311
