第 1章 概述　1
1.1 CSS3出現(xiàn)的歷史和背景　1
1.2 模塊化的CSS新世界　2
第 2章 需要提前了解的知識(shí)　4
2.1 互通互聯(lián)的CSS數(shù)據(jù)類(lèi)型　4
2.1.1 為什么要關(guān)注CSS數(shù)據(jù)類(lèi)型　4
2.1.2 幾個(gè)常見(jiàn)數(shù)據(jù)類(lèi)型的簡(jiǎn)單介紹　5
2.2 學(xué)會(huì)看懂CSS屬性值定義語(yǔ)法　7
2.2.1 學(xué)習(xí)CSS屬性值定義語(yǔ)法的好處　7
2.2.2 CSS屬性值定義語(yǔ)法詳解　8
2.3 了解CSS全局關(guān)鍵字屬性值　12
2.3.1 用過(guò)都說(shuō)好的繼承關(guān)鍵字inherit　12
2.3.2 可以一用的初始值關(guān)鍵字initial　12
2.3.3 了解一下不固定值關(guān)鍵字unset　14
2.3.4 我個(gè)人很喜歡的恢復(fù)關(guān)鍵字revert　15
2.4 指代所有CSS屬性的all屬性　17
2.5 CSS新特性的漸進(jìn)增強(qiáng)處理技巧　18
2.5.1 直接使用CSS新特性　18
2.5.2 利用屬性值的語(yǔ)法差異實(shí)現(xiàn)兼容　19
2.5.3 借助偽類(lèi)或偽元素區(qū)分瀏覽器的技巧　21
2.5.4 @supports規(guī)則下的漸進(jìn)增強(qiáng)處理　23
2.5.5 對(duì)CSS新特性漸進(jìn)增強(qiáng)處理的總結(jié)　26
第3章 從增強(qiáng)已有的CSS屬性開(kāi)始　28
3.1 貫穿全書(shū)的尺寸體系　28
3.1.1 從width:fit-content聲明開(kāi)始　29
3.1.2 stretch、available和fill-available關(guān)鍵字究竟用哪個(gè)　32
3.1.3 深入了解min-content關(guān)鍵字　35
3.1.4 快速了解max-content關(guān)鍵字　39
3.2 深入了解CSS邏輯屬性　40
3.2.1 CSS邏輯屬性有限的使用場(chǎng)景　41
3.2.2 inline/block與start/end元素　43
3.2.3 width/height屬性與inline-size/block-size邏輯屬性　44
3.2.4 由margin/padding/border演變而來(lái)的邏輯屬性　44
3.2.5 text-align屬性支持的邏輯屬性值　45
3.2.6 有用的CSS邏輯屬性inset　46
3.3 在CSS邊框上做文章　47
3.3.1 曇花一現(xiàn)的CSS多邊框　47
3.3.2 獨(dú)一無(wú)二的border-image屬性　47
3.3.3 border-image屬性與漸變邊框　57
3.4 position屬性的增強(qiáng)　60
3.4.1 深入了解sticky屬性值與黏性定位　61
3.4.2 position:sticky聲明的精彩應(yīng)用層次滾動(dòng)　65
3.5 font-family屬性和@font-face規(guī)則新特性　66
3.5.1 system-ui等全新的通用字體族　66
3.5.2 local()函數(shù)與系統(tǒng)字體的調(diào)用　73
3.5.3 unicode-range屬性的詳細(xì)介紹　74
3.5.4 woff/woff2字體　75
3.5.5 font-display屬性與自定義字體的加載渲染　77
3.6 字符單元的中斷與換行　79
3.6.1 使用keep-all屬性值優(yōu)化中文排版　80
3.6.2 break-all屬性值的問(wèn)題和line-break屬性　81
3.6.3 hyphens屬性與連字符　83
3.6.4 與精確換行的控制　85
3.6.5 overflow-wrap:anywhere聲明有什么用　86
3.7 text-align屬性相關(guān)的新特性　88
3.7.1 match-parent等新屬性值　88
3.7.2 text-align屬性的字符對(duì)齊特性　89
3.8 text-decoration屬性全新升級(jí)　90
3.8.1 text-decoration屬性現(xiàn)在是一種縮寫(xiě)　90
3.8.2 text-decoration屬性的累加特性　91
3.8.3 實(shí)用的wavy波浪線(xiàn)　91
3.8.4 可能需要text-underline-position:under聲明　92
3.8.5 更需要text-underline-offset屬性　94
3.8.6 講一講text-decoration-skip屬性的故事　95
3.9 color屬性與顏色設(shè)置　97
3.9.1 148個(gè)顏色關(guān)鍵字　98
3.9.2 transparent關(guān)鍵字　99
3.9.3 currentColor關(guān)鍵字　100
3.9.4 RGB顏色和HSL顏色的新語(yǔ)法　101
3.10 必學(xué)必會(huì)的background屬性新特性　103
3.10.1 實(shí)用的當(dāng)屬background-size屬性　103
3.10.2 background屬性成功的設(shè)計(jì)多背景　108
3.10.3 background-clip屬性與背景顯示區(qū)域限制　110
3.10.4 background-clip:text聲明與漸變文字效果　111
3.10.5 background-origin屬性與背景定位原點(diǎn)控制　112
3.10.6 space和round平鋪模式　113
3.10.7 可以指定background-position的起始方位了　114
3.11 outline相關(guān)新屬性outline-offset　116
3.12 cursor屬性新增的手形效果　117
3.12.1 放大手形zoom-in和縮小手形zoom-out簡(jiǎn)介　117
3.12.2 抓取手形grab和放手手形grabbing簡(jiǎn)介　118
第4章 更細(xì)致的樣式表現(xiàn)　119
4.1 透明度控制屬性opacity　119
4.1.1 opacity屬性的疊加計(jì)算規(guī)則　119
4.1.2 opacity屬性的邊界特性與應(yīng)用　120
4.2 深入了解圓角屬性border-radius　124
4.2.1 了解border-radius屬性的語(yǔ)法　124
4.2.2 弄懂圓角效果是如何產(chǎn)生的　126
4.2.3 border-radius屬性渲染border邊框的細(xì)節(jié)　127
4.2.4 border-radius屬性的高級(jí)應(yīng)用技巧　129
4.3 box-shadow盒陰影　131
4.3.1 inset關(guān)鍵字與內(nèi)陰影　131
4.3.2 不要忽略第四個(gè)長(zhǎng)度值　133
4.3.3 多陰影特性與圖形繪制　134
4.3.4 box-shadow動(dòng)畫(huà)與性能優(yōu)化　137
4.4 CSS 2D變換　138
4.4.1 從基本的變換方法說(shuō)起　138
4.4.2 transform屬性的若干細(xì)節(jié)特性　141
4.4.3 元素應(yīng)用transform屬性后的變化　144
4.4.4 深入了解矩陣函數(shù)matrix()　148
4.4.5 常常被遺忘的transform-origin屬性　152
4.4.6 scale()函數(shù)縮放和zoom屬性縮放的區(qū)別　153
4.4.7 了解全新的translate、scale和rotate屬性　154
4.5 簡(jiǎn)單實(shí)用的calc()函數(shù)　155
4.5.1 關(guān)于calc()函數(shù)　155
4.5.2 了解min()、max()和clamp()函數(shù)　157
第5章 更強(qiáng)的視覺(jué)表現(xiàn)　160
5.1 CSS漸變　160
5.1.1 深入了解linear-gradient()線(xiàn)性漸變　160
5.1.2 深入了解radial-gradient()徑向漸變　165
5.1.3 了解conic-gradient()錐形漸變　170
5.1.4 重復(fù)漸變　173
5.2 CSS 3D變換　174
5.2.1 從常用的3D變換函數(shù)說(shuō)起　174
5.2.2 必不可少的perspective屬性　176
5.2.3 用translateZ()函數(shù)尋找透視位置　177
5.2.4 指定perspective透視點(diǎn)的兩種寫(xiě)法　178
5.2.5 理解perspective-origin屬性　179
5.2.6 transform-style:preserve-3d聲明的含義　180
5.2.7 backface-visibility屬性的作用　180
5.2.8 值得學(xué)習(xí)的旋轉(zhuǎn)木馬案例　182
5.2.9 3D變換與GPU加速　184
5.3 CSS過(guò)渡　184
5.3.1 你可能不知道的transition屬性知識(shí)　185
5.3.2 了解三次貝塞爾時(shí)間函數(shù)類(lèi)型　188
5.3.3 transition與visibility屬性的應(yīng)用指南　190
5.4 CSS動(dòng)畫(huà)　192
5.4.1 初識(shí)animation屬性　193
5.4.2 @keyframes規(guī)則的語(yǔ)法和特性　194
5.4.3 動(dòng)畫(huà)命名與數(shù)據(jù)類(lèi)型　196
5.4.4 負(fù)延時(shí)與即時(shí)播放效果　198
5.4.5 reverse和alternate關(guān)鍵字的區(qū)別和應(yīng)用　200
5.4.6 動(dòng)畫(huà)播放次數(shù)可以是小數(shù)　203
5.4.7 forwards和backwards屬性值究竟是什么意思　204
5.4.8 如何暫停和重啟CSS動(dòng)畫(huà)　207
5.4.9 深入理解steps()函數(shù)　209
5.4.10 標(biāo)簽嵌套與動(dòng)畫(huà)實(shí)現(xiàn)的小技巧　212
第6章 全新的布局方式　214
6.1 分欄布局　214
6.1.1 重點(diǎn)關(guān)注columns屬性　215
6.1.2 column-gap和gap屬性的關(guān)系　217
6.1.3 了解column-rule、column-span和column-fill屬性　218
6.1.4 分欄布局實(shí)現(xiàn)兩端對(duì)齊布局　220
6.1.5 break-inside屬性與元素?cái)帱c(diǎn)位置的控制　221
6.1.6 box-decoration-break屬性與元素?cái)帱c(diǎn)裝飾的控制　222
6.2 彈性布局　224
6.2.1 設(shè)置display:flex聲明發(fā)生了什么　226
6.2.2 flex-direction屬性與整體布局方向　228
6.2.3 flex-wrap屬性與整體布局的換行表現(xiàn)　229
6.2.4 熟練使用flex-flow屬性　230
6.2.5 CSS全新的對(duì)齊特性綜述　231
6.2.6 justify-content屬性與整體布局的水平對(duì)齊　233
6.2.7 垂直對(duì)齊屬性align-items與align-self　234
6.2.8 align-content屬性與整體布局的垂直對(duì)齊　236
6.2.9 order屬性與單個(gè)子項(xiàng)的順序控制　238
6.2.10 ：深入理解flex屬性　238
6.2.11 應(yīng)該在什么時(shí)候使用flex:0/1/none/auto　243
6.2.12 詳細(xì)了解flex-basis屬性與尺寸計(jì)算規(guī)則　250
6.2.13 彈性布局后一行不對(duì)齊的處理　258
6.3 網(wǎng)格布局　263
6.3.1 grid-template-columns和grid-template-rows屬性簡(jiǎn)介　264
6.3.2 了解網(wǎng)格布局專(zhuān)用單位fr　269
6.3.3 詳細(xì)介紹minmax()和fit-content()函數(shù)　271
6.3.4 repeat()函數(shù)的詳細(xì)介紹　273
6.3.5 了解grid-template-areas屬性　278
6.3.6 縮寫(xiě)屬性grid-template　279
6.3.7 了解grid-auto-columns和grid-auto-rows屬性　282
6.3.8 深入了解grid-auto-flow屬性　283
6.3.9 縮寫(xiě)屬性grid　286
6.3.10 間隙設(shè)置屬性column-gap和row-gap（grid-column-gap和grid- row-gap）　288
6.3.11 縮寫(xiě)屬性gap（grid-gap）　289
6.3.12 元素對(duì)齊屬性justify-items和align-items　290
6.3.13 縮寫(xiě)屬性place-items　294
6.3.14 整體對(duì)齊屬性justify-content和align-content　294
6.3.15 縮寫(xiě)屬性place-content　297
6.3.16 區(qū)間范圍設(shè)置屬性grid-column-start/grid-column-end和grid-row-start/ grid-row-end　298
6.3.17 縮寫(xiě)屬性grid-column和grid-row　303
6.3.18 縮寫(xiě)屬性grid-area外加區(qū)域范圍設(shè)置　304
6.3.19 grid子項(xiàng)對(duì)齊屬性justify-self和align-self　307
6.3.20 縮寫(xiě)屬性place-self　307
6.4 CSS Shapes布局　308
6.4.1 詳細(xì)了解shape-outside屬性　308
6.4.2 了解shape-margin屬性　313
6.4.3 了解shape-image-threshold屬性　314
6.4.4 CSS Shapes布局案例　315
第7章 不同設(shè)備的適配與響應(yīng)　317
7.1 @media規(guī)則　317
7.1.1 @media規(guī)則的詳細(xì)介紹　318
7.1.2 對(duì)深色模式和動(dòng)畫(huà)關(guān)閉的支持檢測(cè)　322
7.1.3 對(duì)鼠標(biāo)行為和觸摸行為的支持檢測(cè)　325
7.2 環(huán)境變量函數(shù)env()　328
7.3 rem和vw單位與移動(dòng)端適配實(shí)踐　330
7.3.1 了解視區(qū)相對(duì)單位　331
7.3.2 calc()函數(shù)下的實(shí)踐　332
7.3.3 適合新手的純vw單位的布局　334
7.4 使用touch-action屬性控制設(shè)備的觸摸行為　335
7.4.1 touch-action屬性的常見(jiàn)應(yīng)用　335
7.4.2 了解touch-action屬性各個(gè)屬性值的含義　336
7.5 image-set()函數(shù)與多倍圖設(shè)置　337
第8章 CSS的變量函數(shù)var()與自定義屬性　340
8.1 CSS變量的語(yǔ)法、特性和細(xì)節(jié)　340
8.1.1 CSS自定義屬性的命名　341
8.1.2 var()函數(shù)的語(yǔ)法和特性　341
8.1.3 CSS自定義屬性的作用域　344
8.1.4 CSS自定義屬性值的細(xì)節(jié)　346
8.2 CSS自定義屬性的設(shè)置與獲取　348
8.2.1 在HTML標(biāo)簽中設(shè)置CSS自定義屬性　348
8.2.2 在JavaScript中設(shè)置和獲取CSS自定義屬性　348
8.3 使用content屬性顯示CSS自定義屬性值的技巧　349
8.4 CSS變量的自定義語(yǔ)法技術(shù)簡(jiǎn)介　350
8.4.1 使用CSS變量自定義全新的CSS語(yǔ)法　351
8.4.2 CSS變量模擬CSS新特性　352
第9章 文本字符處理能力的升級(jí)　354
9.1 文字的美化與裝飾　354
9.1.1 文字陰影屬性text-shadow　354
9.1.2 文字描邊屬性text-stroke　355
9.1.3 文字顏色填充屬性text-fill-color　358
9.1.4 學(xué)會(huì)使用text-emphasis屬性進(jìn)行強(qiáng)調(diào)裝飾　362
9.2 文字的旋轉(zhuǎn)與閱讀方向　365
9.2.1 文字方向控制屬性text-orientation　365
9.2.2 文字橫向合并屬性text-combine-upright　366
9.2.3 了解unicode-bidi屬性的新屬性值　368
9.3 文本字符的尺寸控制　370
9.3.1 text-size-adjust屬性到底有沒(méi)有用　370
9.3.2 使用ch新單位換個(gè)心情　371
9.3.3 使用tab-size屬性控制代碼縮進(jìn)的大小　372
9.4 文字渲染與字體呈現(xiàn)　374
9.4.1 了解text-rendering屬性　374
9.4.2 了解文字平滑屬性font-smooth　376
9.4.3 font-stretch屬性與字符胖瘦控制　377
9.4.4 font-synthesis屬性與中文體驗(yàn)增強(qiáng)　380
9.5 字體特征和變體　382
9.5.1 升級(jí)后的font-variant屬性　382
9.5.2 了解字距調(diào)整屬性font-kerning　393
9.5.3 font-feature-settings屬性的定位　394
9.6 可變字體　395
9.6.1 什么是可變字體　395
9.6.2 可變字體與font-variation-settings屬性　399
9.6.3 了解font-optical-sizing屬性　400
第 10章 圖片等多媒體的處理　402
10.1 圖片和視頻元素的內(nèi)在尺寸控制　402
10.1.1 超級(jí)好用的object-fit屬性　403
10.1.2 理解object-position屬性的作用規(guī)則　405
10.2 使用image-orientation屬性糾正圖片的方向　406
10.3 image-rendering屬性與圖像的渲染　408
10.4 不常用的圖像類(lèi)型函數(shù)　411
10.4.1 實(shí)現(xiàn)圖像半透明疊加的cross-fade()函數(shù)　411
10.4.2 神奇的element()函數(shù)　413
第 11章 更絢麗的視覺(jué)表現(xiàn)　415
11.1 深入了解CSS濾鏡屬性filter　416
11.1.1 filter屬性支持的濾鏡函數(shù)詳解　416
11.1.2 更進(jìn)一步的濾鏡技術(shù)　427
11.1.3 引用SVG濾鏡技術(shù)　427
11.2 姐妹花濾鏡屬性backdrop-filter　429
11.2.1 backdrop-filter屬性與filter屬性的異同　429
11.2.2 backdrop-filter屬性與毛玻璃效果　430
11.3 深入了解CSS混合模式　433
11.3.1 詳細(xì)了解各種混合模式效果　434
11.3.2 濾鏡和混合模式的化合反應(yīng)　446
11.4 混合模式屬性background-blend-mode　448
11.4.1 background-blend-mode屬性的常見(jiàn)應(yīng)用　448
11.4.2 深入了解background-blend-mode屬性的作用細(xì)節(jié)　449
11.5 使用isolation: isolate聲明隔離混合模式　454
11.5.1 isolation屬性　454
11.5.2 isolation:isolate聲明的作用原理　455
第 12章 更豐富的圖形處理　457
12.1 超級(jí)實(shí)用的CSS遮罩　457
12.1.1 mask-image屬性的詳細(xì)介紹　457
12.1.2 mask-mode屬性的簡(jiǎn)單介紹　464
12.1.3 mask-repeat屬性的簡(jiǎn)單介紹　465
12.1.4 mask-position屬性的簡(jiǎn)單介紹　465
12.1.5 mask-clip屬性的詳細(xì)介紹　466
12.1.6 mask-origin屬性的簡(jiǎn)單介紹　468
12.1.7 mask-size屬性的簡(jiǎn)單介紹　468
12.1.8 了解mask-type屬性　469
12.1.9 mask-composite屬性的詳細(xì)介紹　469
12.1.10 CSS遮罩的一些經(jīng)典應(yīng)用示例　472
12.1.11 了解-webkit-mask-box-image和mask-border屬性　475
12.2 同樣實(shí)用的CSS剪裁屬性clip-path　478
12.2.1 快速了解clip-path屬性的各個(gè)屬性值　479
12.2.2 深入了解nonzero和evenodd填充規(guī)則　488
12.2.3 clip-path屬性的精彩應(yīng)用示例　490
12.3 -webkit-box-reflect屬性與倒影效果的實(shí)現(xiàn)　492
12.3.1 -webkit-box-reflect屬性的簡(jiǎn)單介紹　493
12.3.2 Firefox瀏覽器實(shí)現(xiàn)投影效果的解決方案　494
12.4 使用offset屬性實(shí)現(xiàn)元素的不規(guī)則運(yùn)動(dòng)　496
12.4.1 了解offset屬性演變的歷史　498
12.4.2 offset-anchor屬性的簡(jiǎn)單介紹　498
12.4.3 offset-distance屬性的簡(jiǎn)單介紹　499
12.4.4 offset-path屬性的詳細(xì)介紹　501
12.4.5 快速了解offset-position屬性　505
12.4.6 理解offset-rotate屬性　506
第 13章 用戶(hù)行為與體驗(yàn)增強(qiáng)　508
13.1 滾動(dòng)行為相關(guān)　508
13.1.1 scroll-behavior屬性與頁(yè)面平滑滾動(dòng)　508
13.1.2 使用overscroll-behavior屬性實(shí)現(xiàn)當(dāng)滾動(dòng)嵌套時(shí)終止?jié)L動(dòng)　509
13.1.3 了解overflow-anchor屬性誕生的背景　511
13.1.4 CSS Scroll Snap簡(jiǎn)介　513
13.1.5 CSS Scrollbars與滾動(dòng)條樣式的自定義　516
13.2 點(diǎn)擊行為相關(guān)　519
13.2.1 你不知道的pointer-events:none聲明　519
13.2.2 觸摸行為設(shè)置屬性touch-action　521
13.3 拉伸行為相關(guān)　521
13.4 輸入行為相關(guān)　523
13.5 選擇行為相關(guān)　524
13.5.1 聊聊user-select屬性　524
13.5.2 使用::selection改變文字被選中后的顏色　526
13.6 打印行為相關(guān)　527
13.6.1 快速了解color-adjust屬性　527
13.6.2 page-break系列屬性與分頁(yè)的控制　529
13.6.3 orphans/widows屬性與內(nèi)容行數(shù)的限制　531
13.6.4 了解@page規(guī)則　532
13.7 性能增強(qiáng)　532
13.7.1 慎用will-change屬性提高動(dòng)畫(huà)性能　533
13.7.2 深入了解contain屬性　535
13.7.3 content-visibility屬性　540
第 14章 SVG元素的CSS控制　541
14.1 使用CSS屬性直接繪制SVG圖形　541
14.2 CSS屬性下的填充設(shè)置　545
14.2.1 fill屬性在Web開(kāi)發(fā)中的應(yīng)用　545
14.2.2 快速了解fill-opacity和fill-rule屬性　547
14.3 CSS屬性下的描邊設(shè)置　550
14.3.1 使用stroke屬性實(shí)現(xiàn)全兼容的文字描邊效果　550
14.3.2 使用stroke-dasharray屬性實(shí)現(xiàn)伸縮自如的虛線(xiàn)效果　552
14.3.3 stroke-dashoffset屬性的經(jīng)典Web應(yīng)用舉例　553
14.4 CSS屬性下的標(biāo)記設(shè)置　555
14.4.1 了解marker-start/marker-end屬性與起止點(diǎn)的標(biāo)記　555
14.4.2 了解marker-mid屬性與轉(zhuǎn)折點(diǎn)的標(biāo)記　556
14.5 其他常見(jiàn)的SVG CSS屬性　557
14.5.1 使用paint-order屬性實(shí)現(xiàn)外描邊效果　557
14.5.2 使用vector-effect屬性讓描邊不會(huì)縮放　559
14.5.3 使用text-anchor屬性讓文字塊水平居中顯示　560
14.5.4 使用dominant-baseline屬性讓文字塊垂直居中顯示　561
14.5.5 alignment-baseline和dominant-baseline屬性的區(qū)別　562
第 15章 Houdini是CSS新的未來(lái)嗎　564
15.1 了解CSS Paint API　564
15.1.1 CSS變量讓CSS Paint API如虎添翼　567
15.1.2 簡(jiǎn)單的總結(jié)　568
15.2 了解CSS Properties & Values API　568
15.3 了解CSS Parser API　570
15.4 詳細(xì)了解CSS Layout API　571
15.4.1 layout()函數(shù)的參數(shù)之間的邏輯關(guān)系　573
15.4.2 文本居中同時(shí)一側(cè)對(duì)齊的布局案例　575
15.5 快速了解CSS Typed OM　577
15.6 簡(jiǎn)單了解Animation Worklet　578
15.7 了解Font Metrics API　579