目录

前言
第1章揭开CSS3的面纱
1.1什么是CSS
1.1.1CSS3的新特性
1.1.2CSS3的发展状况
1.1.3现在能使用CSS3吗
1.1.4使用CSS3有什么好处
1.2浏览器对CSS3的支持状况
1.2.1经典回顾：图说浏览器大战
1.2.2浏览器的市场份额
1.2.3主流浏览器对CSS3支持状况
1.3渐进增强
1.3.1渐进增强与优雅降级
1.3.2渐进增强的优点
1.4CSS3的现状及未来
1.4.1谁在使用CSS
1.4.2CSS3的未来
1.5本章小结

第2章CSS3选择器
2.1认识CSS选择器
2.1.1CSS3选择器的优势
2.1.2CSS3选择器分类
2.2基本选择器
2.2.1基本选择器语法
2.2.2浏览器兼容性
2.2.3实战体验：使用基本选择器
2.2.4通配选择器
2.2.5元素选择器
2.2.6ID选择器
2.2.7类选择器
2.2.8群组选择器
2.3层次选择器
2.3.1层次选择器语法
2.3.2浏览器兼容性
2.3.3实战体验：使用层次选择器选择元素
2.3.4后代选择器
2.3.5子选择器
2.3.6相邻兄弟选择器
2.3.7通用兄弟选择器
2.4动态伪类选择器
2.4.1动态伪类选择器语法
2.4.2浏览器兼容性
2.4.3实战体验：美化按钮
2.5目标伪类选择器
2.5.1目标伪类选择器语法
2.5.2浏览器兼容性
2.5.3实战体验：制作手风琴效果
2.6语言伪类选择器
2.6.1语言伪类选择器语法
2.6.2浏览器兼容性
2.6.3实战体验：定制不同语言版本引文风格
2.7UI元素状态伪类选择器
2.7.1UI元素状态伪类选择器语法
2.7.2浏览器兼容性
2.7.3实战体验：Bootstrap的表单元素UI状态
2.8结构伪类选择器
2.8.1重温HTML的DOM树
2.8.2结构伪类选择器语法
2.8.3浏览器兼容性
2.8.4结构伪类选择器中的n是什么
2.8.5结构伪类选择器的使用方法详解
2.8.6实战体验：CSS3美化表格
2.9否定伪类选择器
2.9.1否定伪类选择器语法
2.9.2浏览器兼容性
2.9.3实战体验：改变图片效果
2.10伪元素
2.10.1伪元素::first-letter
2.10.2伪元素::first-line
2.10.3伪元素::before和::after
2.10.4伪元素::selection
2.11属性选择器
2.11.1属性选择器语法
2.11.2浏览器兼容性
2.11.3属性选择器的使用方法详解
2.11.4实战体验：创建个性化链接样式
2.12本章小结

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

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

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

第6章CSS3颜色特性
6.1网页中的色彩特性
6.1.1网页色彩的表现原理
6.1.2Web页面的安全色
6.1.3色彩模式
6.2CSS3透明属性
6.2.1opacity属性的语法及参数
6.2.2opacity浏览器兼容性
6.2.3实战体验：制作透明过渡色块
6.3CSS3颜色模式
6.3.1RGBA颜色模式
6.3.2HSL颜色模式
6.3.3HSLA颜色模式
6.3.4RGBA和HSLA颜色模式之间的选择
6.3.5RGBA/HSLA的IE兼容方案
6.3.6RGBA/HSLA滤镜格式
6.4本章小结

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

第8章CSS3伸缩布局盒模型
8.1Flexbox模型基础知识
8.1.1CSS中的布局模式
8.1.2Flexbox模型的功能
8.1.3Flexbox模型中的术语
8.1.4Flexbox模型规范状态
8.1.5Flexbox模型浏览器兼容性
8.1.6Flexbox模型语法变更
8.2旧版本Flexbox模型的基本使用
8.2.1伸缩容器设置display
8.2.2伸缩流方向box-orient
8.2.3布局顺序box-direction
8.2.4伸缩换行box-lines
8.2.5主轴对齐box-pack
8.2.6侧轴对齐box-align
8.2.7伸缩性box-flex
8.2.8显示顺序box-ordinal-group
8.2.9实战体验：box制作自适应的三列等高布局
8.3混合版本Flexbox模型的基本使用
8.3.1伸缩容器设置display
8.3.2伸缩流方向flex-direction
8.3.3伸缩换行flex-wrap
8.3.4伸缩流方向与换行flex-flow
8.3.5主轴对齐flex-pack
8.3.6侧轴对齐flex-align
8.3.7堆栈伸缩行flex-line-pack
8.3.8伸缩性flex
8.3.9显示顺序flex-order
8.4新版本Flexbox模型的基本使用
8.4.1伸缩容器display
8.4.2伸缩流方向flex-direction
8.4.3伸缩换行flex-wrap
8.4.4伸缩流方向与换行flex-flow
8.4.5主轴对齐justify-content
8.4.6侧轴对齐align-items和align-self
8.4.7堆栈伸缩行align-content
8.4.8伸缩性flex
8.4.9显示顺序order
8.5综合案例：跨浏览器的三列布局
8.6本章小结

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

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

第11章CSS3变形
11.1CSS3变形简介
11.1.1CSS变形属性及函数
11.1.2浏览器兼容性
11.2CSS变形属性详解
11.2.1transform属性
11.2.2transform-origin属性
11.2.3transform-style属性
11.2.4perspective属性
11.2.5perspective-origin属性
11.2.6backface-visibility属性
11.3CSS32D变形
11.3.12D位移
11.3.22D缩放
11.3.32D旋转
11.3.42D倾斜
11.3.52D矩阵
11.4CSS33D变形
11.4.13D位移
11.4.23D缩放
11.4.33D旋转
11.4.43D矩阵
11.5多重变形
11.5.12D多重变形制作立方体
11.5.23D多重变形制作立方体
11.6综合案例：3D变形制作产品信息展示
11.7本章小结

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

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

第14章媒体特性与Responsive设计
14.1媒体类型
14.1.1MediaType设备类型
14.1.2媒体类型引用方法
14.2媒体特性
14.2.1MediaQuery和CSS属性集合
14.2.2常用MediaQuery设备特性
14.2.3浏览器兼容性
14.2.4MediaQuery使用方法
14.3Responsive布局概念
14.3.1Responsive设计特点
14.3.2Responsive中的术语
14.3.3Responsive布局技巧
14.3.4meta标签
14.4本章小结

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

　　第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-columnLayout）模块描述了如何像报纸、杂志那样，把一个简单的区块拆分成多列，第9章为大家介绍这个模块的运用。“弹性盒模型布局”（FlexibleBoxLayout）模块能让区块在水平、垂直方向对齐，能让区块自适应屏幕大小，相对于CSS的浮动布局、inline-block布局、*定位布局来说，它显得更加方便与灵活。缺点是，这两个模块在一些浏览器中还不被支持，但随着技术的发展革新，这一刻终将到来。
　　7．Web字体和WebFont图标
　　浏览器对Web字体有诸多限制，WebFont图标对于设计师来说更奢侈。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）布局，使布局可以根据用户的显示终端或设备特征选择对应的样式文件，从而在不同的显示分辨率或设备下具有不同的布局渲染效果，特别是在移动端上的实现更是一种理想的做法。

　　 本书是国内著名的Web前端专家历时2载的心血之作，根据*新的CSS3撰写，融入了作者在CSS领域近10年的使用经验，旨在将本书打造成为CSS3领域*权威和实用的专业著作，供没有经验的读者系统学习，供有经验的读者参考备查。
　　 本书理论知识系统全面，详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性，所有这些都巧妙地融入到案例中，而不是枯燥的理论讲解；讲解方式直观易懂，以图解的方式巧妙地展示了这些新特性；实战性强，既为每个知识点精心设计了小案例，也有综合性的大案例，所有案例都非常详尽，有功能需求分析、设计思路和完整代码，还有*终的效果展示。

文件大小：144MB

内含PC端和移动端阅读器