内容简介
本书是国内著名的Web前端专家历时2载的心血之作，根据最新的CSS3撰写，融入了作者在CSS领域近10年的使用经验，旨在将本书打造成为CSS3领域最权威和实用的专业著作，供没有经验的读者系统学习，供有经验的读者参考备查。
本书理论知识系统全面，详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性，所有这些都巧妙地融入到案例中，而不是枯燥的理论讲解；讲解方式直观易懂，以图解的方式巧妙地展示了这些新特性；实战性强，既为每个知识点精心设计了小案例，也有综合性的大案例，所有案例都非常详尽，有功能需求分析、设计思路和完整代码，还有最终的效果展示。
内容简介
本书是国内著名的Web前端专家历时两载的心血之作，根据最新的CSS3撰写，融入了作者在CSS领域近10年的使用经验，旨在将本书打造成为CSS3领域最权威和实用的专业著作，供没有经验的读者系统学习，供有经验的读者参考备查。
本书理论知识系统全面，详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性，所有这些都巧妙地融入到案例中，而不是纯粹枯燥的理论讲解；讲解方式直观易懂，以图解的方式巧妙地展示了这些新特性；实战性强，既为每个知识点精心设计了小案例，也有综合性的大案例，所有案例都非常详尽，有功能需求分析、设计思路和完整代码，还有最终的效果展示。
CSS3在前端开发中的重要性毋庸置疑，这些年来，新的CSS3规范在不断演进和完善，但是一直没有确定的规范。从技术标准的角度来讲，本书应该是目前版本最新的；从知识点的涵盖面来讲，本书也是同类书中最全面的。更难得的是，为了便于读者理解，作者用大量直观的图示替代了枯燥的文字，采用了图解的方式来讲解，相信这应该会很受读者欢迎。此外，本书还包含大量实战案例，理论与实践相结合。如果你要系统学习CSS3或者在开发中还不能熟练使用它，强烈推荐这本书给你。
——51CTO（www.51cto.com） 中国领先的IT技术网站
CSS在Web前端中一直占有非常重要的位置，因为它与产品的用户体验直接相关。CSS3规范的起草和修订持续了10余年，至今仍未结束，更具吸引力的新特性不断出现，也不断有特性被修改和完善，CSS3规范一直在变化之中，这使得原本就相对复杂的学习任务变得难上加难。本书作者大漠作为一位资深的Web前端技术专家，在CSS3领域浸淫多年，不仅见证了CSS3规范的发展和演变过程，而且经历了几乎所有CSS3的初学者可能会遇到的各种问题，包括技术上的，也包括学习方法上的。为了让后来者少走弯路，大漠根据最新的CSS3规范，结合自己的学习经历，把自己这些年来在CSS3上的实践经验以“图解+案例”的形式集中呈现在这本书中，希望能帮助所有读者在系统学习和使用CSS3的过程中达到事半功倍的效果。
作者简介
廖伟华（网名：大漠） 资深Web前端工程师，W3cplus(http://www.w3cplus.com)创始人，目前就职于Ctrip UED。中国Drupal社区核心成员之一。对HTML5、CSS3、XHTML和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。现在还关注Web产品策划、交互设计、SEO以及移动端开发。2012年4月刊的《程序员》杂志上发表文章“Twitter Bootstrap：前端框架利器”。
为什么要写这本书
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文档声明，还有更简洁的meta字符编码、style和script标签。没有使用任何HTML 5的新标签，比如section、header、nav和article，所以页面可以在IE 8及以下版本正常运行，可以在自己的页面里将其更换为喜欢的标签。所有示例也同样兼容HTML 4.01和XHTML 1.0。
为了方便阅读，本书中的部分案例代码仅提供了CSS样式代码和局部HTML代码，所有CSS实例代码必须置于一个外部样式文件或HTML文档的
由于CSS3技术还在不断的完善与更新中，建议根据本书提供的参考地址，获取有关CSS3最新信息与更新。
勘误和支持
由于作者的水平有限，编写时间仓促，书中难免会出现一些错误或者不准确的地方，恳请读者批评指正。为此，我特意创建了一个在线支持站点http://www.w3cplus.com/book-comment.html。大家可以将书中的错误发布在页面的评论中，遇到任何问题，可以留言或者发送邮件到w3cplus@hotmail.com，我将尽量提供最满意的答案。大家还可以关注微信公众账号ednote进入“第三极社区”微社区与广大读者和本书作者互动。书中的全部源文件可以从华章网站（http://www.hzbook.com）下载，我也会将相应的功能及时更正。期待能够得到你们真挚反馈。
致谢
首先要感谢好友林小志，是他让我鼓起勇气开始写这本书，也是他一直督促我的进度，并一直鼓励我坚持到最后。同时感谢W3CPlus（http://www.w3cplus.com）社区的所有同学们一直以来对我的默默支持。
感谢机械工业出版社的编辑杨福川给我这样一个机会，在一年多的时间中始终支持我的写作，你的鼓励和帮助引导我能顺利完成全部书稿。同时也要感谢白宇编辑辛苦的付出，帮助我修改书中不足。
感谢我的爸爸、妈妈将我培养成人，并时时刻刻为我灌输着信心和力量！也要感谢我的弟弟，引导我进入这个行业，让我有机会从事喜欢的工作。感谢太太罗群英和儿子一直以来对我的支持，让我有一个安心写作的环境，并给我足够的信心去完成这本拙作。
谨以此书献给我最亲爱的家人、朋友以及众多热爱W3CPlus社区的朋友们！
计算机\程序设计
CSS3在前端开发中的重要性是毋庸置疑的，这些年来，新的CSS3标准在不断演进和完善，但是一直没有确定的标准。从技术标准的角度来讲，本书应该是目前版本最新的；从知识点的涵盖面来讲，本书也是同类书中最全面的。更为难得的是，为了便于读者理解，作者用大量直观的图示替代了枯燥的文字，采用了图解的方式来讲解，相信应该会很受读者欢迎。此外，本书还有大量的实战案例，理论与实践相结合。如果你要系统学习CSS3或者是开发中还不能熟练使用它，这本书强烈推荐给你。
——51CTO（www.51cto.com）中国领先的IT技术网站
CSS在Web前端中一直占有非常重要的位置，因为它与产品的用户体验直接相关。CSS3规范的起草和修订持续了10余年，至今仍未结束，更具吸引力的新特性不断出现，也不断有特性被修改和完善，CSS3规范一直在变化之中，这使得原本就相对复杂的学习任务变得难上加难。本书作者大漠作为一位资深的Web前端技术专家，在CSS3领域浸淫多年，不仅见证了CSS3规范的发展和演变过程，而且也经历了几乎所有CSS3的初学者可能会遇到的各种问题，包括技术上的，也包括学习方法上的。为了让后来者少走弯路，大漠根据最新的CSS3规范，结合自己的学习经历，把自己这些年来在CSS3上的实践经验以“图解+案例”的形式集中呈现在了这本书中，希望能帮助所有读者在系统学习和使用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
