圖解CSS3：核心技術與案例實戰（簡體書）

本書是國內著名的Web前端專家歷時2載的心血之作，根據最新的CSS3撰寫，融入了作者在CSS領域近10年的使用經驗，旨在將本書打造成為CSS3領域最權威和實用的專業著作，供沒有經驗的讀者系統學習，供有經驗的讀者參考備查。
本書理論知識系統全面，詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮佈局盒模型、多列佈局、漸變、過渡、動畫、媒體、回應Web設計、Web字體等主題下涵蓋的所有CSS3新特性，所有這些都巧妙地融入到案例中，而不是枯燥的理論講解；講解方式直觀易懂，以圖解的方式巧妙地展示了這些新特性；實戰性強，既為每個知識點精心設計了小案例，也有綜合性的大案例，所有案例都非常詳盡，有功能需求分析、設計思路和完整代碼，還有最終的效果展示。

 

廖偉華（網名：大漠）資深Web前端工程師，W3cplus(http://www.w3cplus.com)創始人，目前就職於CtripUED。中國Drupal社區核心成員之一。對HTML5、CSS3和XHTML，Sass等前端腳本語言有非常深入的認識和豐富的實踐經驗，尤其專注對CSS3的研究，是國內最早研究和使用CSS3技術的一批人。現在還關注Web產品策劃、交互設計、SEO以及移動端開發。2012年4月份期刊發表《TwitterBootstrap:前端框架利器》。

 

前言
第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本章小结

 

揭開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）佈局，使佈局可以根據用戶的顯示終端或設備特徵選擇對應的樣式檔，從而在不同的顯示解析度或設備下具有不同的佈局渲染效果，特別是在移動端上的實現更是一種理想的做法。