圖解CSS3：核心技術(shù)與案例實(shí)戰(zhàn)

Contents 目　錄 
前　言 
第1章　揭開CSS3的面紗 1 
1.1　什么是CSS3  1 
1.1.1　CSS3的新特性  2 
1.1.2　CSS3的發(fā)展?fàn)顩r  4 
1.1.3　現(xiàn)在能使用CSS3嗎  5 
1.1.4　使用CSS3有什么好處 5 
1.2　瀏覽器對(duì)CSS3的支持狀況  6 
1.2.1　經(jīng)典回顧：圖說瀏覽器大戰(zhàn) 7 
1.2.2　瀏覽器的市場(chǎng)份額  8 
1.2.3　主流瀏覽器對(duì)CSS3支持狀況  9 
1.3　漸進(jìn)增強(qiáng)  11 
1.3.1　漸進(jìn)增強(qiáng)與優(yōu)雅降級(jí) 11 
1.3.2　漸進(jìn)增強(qiáng)的優(yōu)點(diǎn)  12 
1.4　CSS3的現(xiàn)狀及未來 13 
1.4.1　誰在使用CSS3  13 
1.4.2　CSS3的未來  14 
1.5　本章小結(jié) 14 
第2章　CSS3選擇器  15 
2.1　認(rèn)識(shí)CSS選擇器  15 
2.1.1　CSS3選擇器的優(yōu)勢(shì)  15 
2.1.2　CSS3選擇器分類  16 
2.2　基本選擇器 16 
2.2.1　基本選擇器語法  16 
2.2.2　瀏覽器兼容性  17 
2.2.3　實(shí)戰(zhàn)體驗(yàn)：使用基本選擇器  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　實(shí)戰(zhàn)體驗(yàn)：使用層次選擇器選擇元素  21 
2.3.4　后代選擇器  23 
2.3.5　子選擇器 23 
2.3.6　相鄰兄弟選擇器  24 
2.3.7　通用兄弟選擇器 25 
2.4　動(dòng)態(tài)偽類選擇器 25 
2.4.1　動(dòng)態(tài)偽類選擇器語法  26 
2.4.2　瀏覽器兼容性  26 
2.4.3　實(shí)戰(zhàn)體驗(yàn)：美化按鈕 27 
2.5　目標(biāo)偽類選擇器  29 
2.5.1　目標(biāo)偽類選擇器語法 29 
2.5.2　瀏覽器兼容性30 
2.5.3　實(shí)戰(zhàn)體驗(yàn)：制作手風(fēng)琴效果30 
2.6　語言偽類選擇器  33 
2.6.1　語言偽類選擇器語法33 
2.6.2　瀏覽器兼容性 34 
2.6.3　實(shí)戰(zhàn)體驗(yàn)：定制不同語言版本引文風(fēng)格  34 
2.7　UI元素狀態(tài)偽類選擇器 36 
2.7.1　UI元素狀態(tài)偽類選擇器語法36 
2.7.2　瀏覽器兼容性36 
2.7.3　實(shí)戰(zhàn)體驗(yàn)：Bootstrap的表單元素UI狀態(tài)  37 
2.8　結(jié)構(gòu)偽類選擇器 41 
2.8.1　重溫HTML的DOM樹41 
2.8.2　結(jié)構(gòu)偽類選擇器語法  42 
2.8.3　瀏覽器兼容性  43 
2.8.4　結(jié)構(gòu)偽類選擇器中的n是什么  44 
2.8.5　結(jié)構(gòu)偽類選擇器的使用方法詳解 47 
2.8.6　實(shí)戰(zhàn)體驗(yàn)：CSS3美化表格 61 
2.9　否定偽類選擇器  66 
2.9.1　否定偽類選擇器語法  66 
2.9.2　瀏覽器兼容性 67 
2.9.3　實(shí)戰(zhàn)體驗(yàn)：改變圖片效果  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　實(shí)戰(zhàn)體驗(yàn)：創(chuàng)建個(gè)性化鏈接樣式 81 
2.12　本章小結(jié) 84 
第3章　CSS3邊框 85 
3.1　CSS3邊框簡(jiǎn)介  85 
3.1.1　邊框的基本屬性 85 
3.1.2　邊框的類型  86 
3.1.3　誰在使用CSS3邊框 88 
3.2　CSS3邊框顏色屬性  88 
3.2.1　border-color屬性的語法及參數(shù) 88 
3.2.2　瀏覽器兼容性  90 
3.2.3　border-color屬性的優(yōu)勢(shì)90 
3.2.4　實(shí)戰(zhàn)體驗(yàn)：立體漸變邊框效果 91 
3.3　CSS3圖片邊框?qū)傩?1 
3.3.1　border-image屬性的語法及參數(shù)92 
3.3.2　border-image屬性使用方法  92 
3.3.3　瀏覽器兼容性  99 
3.3.4　border-image屬性的優(yōu)勢(shì) 100 
3.3.5　實(shí)戰(zhàn)體驗(yàn)：按鈕圓角陰影效果100 
3.4　CSS3圓角邊框?qū)傩?05 
3.4.1　border-radius屬性的語法及參數(shù)105 
3.4.2　border-radius屬性使用方法107 
3.4.3　瀏覽器兼容性  114 
3.4.4　border-radius屬性的優(yōu)勢(shì)  115 
3.4.5　實(shí)戰(zhàn)體驗(yàn)：制作特殊圖形  115 
3.5　CSS3盒子陰影屬性  118 
3.5.1　box-shadow屬性的語法及參數(shù)118 
3.5.2　box-shadow屬性使用方法 119 
3.5.3　瀏覽器兼容性129 
3.5.4　box-shadow屬性的優(yōu)勢(shì)130 
3.5.5　實(shí)戰(zhàn)體驗(yàn)：制作3D搜索表單130 
3.6　本章小結(jié) 133 
第4章　CSS3背景 134 
4.1　CSS3背景屬性簡(jiǎn)介134 
4.1.1　背景的基本屬性  134 
4.1.2　與背景相關(guān)的新增屬性 137 
4.2　 CSS3背景原點(diǎn)屬性 137 
4.2.1　background-origin屬性的語法及參數(shù) 137 
4.2.2　background-origin屬性使用方法 138 
4.2.3　瀏覽器兼容性 140 
4.3　CSS3背景裁切屬性 141 
4.3.1　background-clip屬性的語法及參數(shù)  141 
4.3.2　background-clip屬性使用方法 143 
4.3.3　瀏覽器兼容性  147 
4.4　CSS3背景尺寸屬性 148 
4.4.1　background-size屬性的語法及參數(shù)  148 
4.4.2　background-size屬性使用方法  149 
4.4.3　瀏覽器兼容性152 
4.4.4　實(shí)戰(zhàn)體驗(yàn)：制作全屏背景 153 
4.5　內(nèi)聯(lián)元素背景圖像平鋪循環(huán)方式  154 
4.6　CSS3多背景屬性 154 
4.6.1　CSS3多背景語法及參數(shù) 155 
4.6.2　CSS3多背景的優(yōu)勢(shì)  156 
4.6.3　瀏覽器兼容性 156 
4.6.4　實(shí)戰(zhàn)體驗(yàn)：制作花邊框  157 
4.7　本章小結(jié) 159 
第5章　CSS3文本 160 
5.1　CSS3文本簡(jiǎn)介  160 
5.2　CSS3文本陰影屬性 161 
5.2.1　text-shadow屬性的語法及參數(shù)  162 
5.2.2　瀏覽器兼容性  162 
5.2.3　實(shí)戰(zhàn)體驗(yàn)：制作立體文本 163 
5.3　CSS3溢出文本屬性  166 
5.3.1　text-overflow屬性的語法及參數(shù)  166 
5.3.2　瀏覽器兼容性  166 
5.3.3　text-overflow屬性使用方法  167 
5.3.4　實(shí)戰(zhàn)體驗(yàn)：制作固定區(qū)域的博客列表 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　文本換行技術(shù)對(duì)比  180 
5.5　本章小結(jié)  180 
☆第6章　CSS3顏色特性  181 
6.1　網(wǎng)頁中的色彩特性  181 
6.1.1　網(wǎng)頁色彩的表現(xiàn)原理 181 
6.1.2　Web頁面的安全色  182 
6.1.3　色彩模式  183 
6.2　CSS3透明屬性  184 
6.2.1　opacity屬性的語法及參數(shù) 184 
6.2.2　opacity瀏覽器兼容性 185 
6.2.3　實(shí)戰(zhàn)體驗(yàn)：制作透明過渡色塊  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　本章小結(jié) 197 
第7章　CSS3盒模型198 
7.1　CSS盒模型簡(jiǎn)介  198 
7.1.1　什么是盒模型 198 
7.1.2　重置盒模型解析模式 199 
7.2　CSS3盒模型屬性200 
7.2.1　box-sizing屬性的語法及參數(shù) 200 
7.2.2　瀏覽器兼容性  201 
7.2.3　實(shí)戰(zhàn)體驗(yàn)：box-sizing拯救了布局 202 
7.3　CSS3內(nèi)容溢出屬性  209 
7.3.1　overflow-x和overflow-y屬性的語法及參數(shù)  209 
7.3.2　瀏覽器兼容性 209 
7.4　CSS3自由縮放屬性  210 
7.4.1　resize屬性的語法及參數(shù)210 
7.4.2　瀏覽器兼容性 210 
7.4.3　實(shí)戰(zhàn)體驗(yàn)：修改文本域隨意調(diào)整大小的功能210 
7.5　CSS3外輪廓屬性211 
7.5.1　outline屬性的語法及參數(shù) 211 
7.5.2　瀏覽器兼容性 212 
7.5.3　outline和border的對(duì)比212 
7.5.4　實(shí)戰(zhàn)體驗(yàn)：模仿邊框效果 213 
7.6　本章小結(jié) 213 
第8章　CSS3伸縮布局盒模型214 
8.1　Flexbox模型基礎(chǔ)知識(shí)214 
8.1.1　CSS中的布局模式 214 
8.1.2　Flexbox模型的功能 215 
8.1.3　Flexbox模型中的術(shù)語  215 
8.1.4　Flexbox模型規(guī)范狀態(tài) 218 
8.1.5　Flexbox模型瀏覽器兼容性 218 
8.1.6　Flexbox模型語法變更  219 
8.2　舊版本Flexbox模型的基本使用  221 
8.2.1　伸縮容器設(shè)置display 222 
8.2.2　伸縮流方向box-orient 224 
8.2.3　布局順序box-direction  226 
8.2.4　伸縮換行box-lines229 
8.2.5　主軸對(duì)齊box-pack 232 
8.2.6　側(cè)軸對(duì)齊box-align 237 
8.2.7　伸縮性box-flex  242 
8.2.8　顯示順序box-ordinal-group  246 
8.2.9　實(shí)戰(zhàn)體驗(yàn)：box制作自適應(yīng)的三列等高布局249 
8.3　混合版本Flexbox模型的基本使用253 
8.3.1　伸縮容器設(shè)置display 253 
8.3.2　伸縮流方向flex-direction  254 
8.3.3　伸縮換行flex-wrap  257 
8.3.4　伸縮流方向與換行flex-flow  259 
8.3.5　主軸對(duì)齊flex-pack 259 
8.3.6　側(cè)軸對(duì)齊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　主軸對(duì)齊justify-content 277 
8.4.6　側(cè)軸對(duì)齊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　本章小結(jié) 292 
第9章　CSS3多列布局  293 
9.1　CSS3多列布局簡(jiǎn)介 293 
9.1.1　瀏覽器兼容性  293 
9.1.2　CSS3多列布局的屬性 294 
9.2　CSS3多列布局基本屬性 295 
9.2.1　columns屬性的語法及參數(shù) 295 
9.2.2　瀏覽器兼容性 295 
9.2.3　實(shí)戰(zhàn)體驗(yàn)：Web頁面的多列布局  296 
9.3　CSS3多列布局列寬屬性  297 
9.3.1　column-width屬性的語法及參數(shù) 297 
9.3.2　實(shí)戰(zhàn)體驗(yàn)：瀏覽器根據(jù)窗口寬度變化調(diào)整列數(shù) 298 
9.4　CSS3多列布局列數(shù)屬性  302 
9.4.1　column-count屬性的語法及參數(shù)  302 
9.4.2　實(shí)戰(zhàn)體驗(yàn)：顯示固定列數(shù)  302 
9.5　CSS3多列布局列間距屬性  303 
9.5.1　column-gap屬性的語法及參數(shù)  304 
9.5.2　實(shí)戰(zhàn)體驗(yàn)：設(shè)置列間距304 
9.6　CSS3多列布局列邊框樣式屬性  306 
9.6.1　column-rule屬性的語法及參數(shù)  306 
9.6.2　實(shí)戰(zhàn)體驗(yàn)：設(shè)置列邊框  307 
9.7　CSS3多列布局跨列屬性  309 
9.7.1　column-span屬性的語法及參數(shù)  310 
9.7.2　實(shí)戰(zhàn)體驗(yàn)：文章標(biāo)題跨列顯示  310 
9.8　CSS3多列布局列高度屬性  311 
9.9　本章小結(jié) 311 
☆第10章　CSS3漸變312 
10.1　CSS3漸變簡(jiǎn)介312 
10.1.1　什么是色標(biāo)  312 
10.1.2　瀏覽器兼容性 313 
10.2　CSS3線性漸變314 
10.2.1　CSS3線性漸變語法與參數(shù)  315 
10.2.2　CSS3 線性漸變的基本用法  317 
10.2.3　自定義CSS3線性漸變  324 
10.2.4　實(shí)戰(zhàn)體驗(yàn)：CSS3制作漸變按鈕 325 
10.3　CSS3徑向漸變  333 
10.3.1　CSS3徑向漸變語法  333 
10.3.2　CSS3徑向漸變的屬性參數(shù) 334 
10.3.3　CSS3徑向漸變的基本用法 335 
10.3.4　實(shí)戰(zhàn)體驗(yàn)：CSS3徑向漸變制作圓形圖標(biāo)按鈕  350 
10.4　CSS3重復(fù)漸變 353 
10.4.1　CSS3重復(fù)線性漸變 353 
10.4.2　CSS3重復(fù)徑向漸變 354 
10.4.3　實(shí)戰(zhàn)體驗(yàn)：制作記事本紙張效果 354 
10.5　綜合案例：CSS3漸變制作紋理背景 355 
10.6　本章小結(jié)  357 
第11章　CSS3變形 358 
11.1　CSS3變形簡(jiǎn)介358 
11.1.1　CSS變形屬性及函數(shù)  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