基本信息
【插图】
编辑推荐
资深Web前端专家历时两载的经验与心血之作，旨在根据最新CSS3规范撰写最权威的CSS3学习资料和备查手册
理论知识系统且全面，以图解的方式讲解CSS3的各项功能和特性，包含大量实战案例，直观易懂，实战性强
内容简介
书籍
计算机书籍
《图解CSS3：核心技术与案例实战》是国内著名的Web前端专家历时两载的心血之作，根据最新的CSS3撰写，融入了作者在CSS领域近10年的使用经验，旨在将本书打造成为CSS3领域最权威和实用的专业著作，供没有经验的读者系统学习，供有经验的读者参考备查。
《图解CSS3：核心技术与案例实战》理论知识系统全面，详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性，所有这些都巧妙地融入到案例中，而不是纯粹枯燥的理论讲解；讲解方式直观易懂，以图解的方式巧妙地展示了这些新特性；实战性强，既为每个知识点精心设计了小案例，也有综合性的大案例，所有案例都非常详尽，有功能需求分析、设计思路和完整代码，还有最终的效果展示。
计算机书籍
《图解CSS3：核心技术与案例实战》是国内著名的Web前端专家历时两载的心血之作，根据最新的CSS3撰写，融入了作者在CSS领域近10年的使用经验，旨在将本书打造成为CSS3领域最权威和实用的专业著作，供没有经验的读者系统学习，供有经验的读者参考备查。
《图解CSS3：核心技术与案例实战》理论知识系统全面，详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性，所有这些都巧妙地融入到案例中，而不是纯粹枯燥的理论讲解；讲解方式直观易懂，以图解的方式巧妙地展示了这些新特性；实战性强，既为每个知识点精心设计了小案例，也有综合性的大案例，所有案例都非常详尽，有功能需求分析、设计思路和完整代码，还有最终的效果展示。
作译者
廖伟华(网名：大漠)，资深Web前端工程师，W3cplus(http：／／www．w3cplus．com)创始人，目前就职于Ctrip UED。中国Drupal社区核心成员之一。对HTML5、CSS3、XHTML和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。现在还关注Web产品策划、交互设计、SEO以及移动端开发。2012年4月刊的《程序员》杂志上发表文章“Twitter Bootstrap：前端框架利器”。
目录
《图解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
前 言
第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
前言
为什么要写这本书
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是在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规范在不断演进和完善，但是一直没有确定的规范。从技术标准的角度来讲，本书应该是目前版本最新的；从知识点的涵盖面来讲，本书也是同类书中最全面的。更难得的是，为了便于读者理解，作者用大量直观的图示替代了枯燥的文字，采用了图解的方式来讲解，相信这应该会很受读者欢迎。此外，本书还包含大量实战案例，理论与实践相结合。如果你要系统学习CSS3或者在开发中还不能熟练使用它，强烈推荐这本书给你。
——51CTO(www．51cto．com)中国领先的IT技术网站
——51CTO(www．51cto．com)中国领先的IT技术网站
书摘
第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．阴影效果
揭开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．阴影效果
