图解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
展开阅读

前言

为什么要写这本书

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中的每个知识点。
展开阅读

书摘

第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．阴影效果