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