CSS新世界

第 1章 概述　1

1.1 CSS3出現(xiàn)的歷史和背景　1

1.2 模塊化的CSS新世界　2

第 2章 需要提前了解的知識(shí)　4

2.1 互通互聯(lián)的CSS數(shù)據(jù)類型　4

2.1.1 為什么要關(guān)注CSS數(shù)據(jù)類型　4

2.1.2 幾個(gè)常見數(shù)據(jù)類型的簡(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 借助偽類或偽元素區(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屬性開始　28

3.1 貫穿全書的尺寸體系　28

3.1.1 從width:fit-content聲明開始　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)在是一種縮寫　90

3.8.2 text-decoration屬性的累加特性　91

3.8.3 唯一實(shí)用的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屬性與顏色設(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)畫與性能優(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)的視覺表現(xiàn)　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 重復(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)的兩種寫法　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ù)類型　188

5.3.3 transition與visibility屬性的應(yīng)用指南　190

5.4 CSS動(dòng)畫　192

5.4.1 初識(shí)animation屬性　193

5.4.2 @keyframes規(guī)則的語(yǔ)法和特性　194

5.4.3 動(dòng)畫命名與數(shù)據(jù)類型　196
5.4.4 負(fù)延時(shí)與即時(shí)播放效果　198

5.4.5 reverse和alternate關(guān)鍵字的區(qū)別和應(yīng)用　200

5.4.6 動(dòng)畫播放次數(shù)可以是小數(shù)　203

5.4.7 forwards和backwards屬性值究竟是什么意思　204

5.4.8 如何暫停和重啟CSS動(dòng)畫　207

5.4.9 深入理解steps()函數(shù)　209

5.4.10 標(biāo)簽嵌套與動(dòng)畫實(shí)現(xiàn)的小技巧　212

第6章 全新的布局方式　214

6.1 分欄布局　214

6.2 彈性布局　224

6.3 網(wǎng)格布局　263

6.4 CSS Shapes布局　308

第7章 不同設(shè)備的適配與響應(yīng)　317

7.1 @media規(guī)則　317

7.2 環(huán)境變量函數(shù)env()　328

7.3 rem和vw單位與移動(dòng)端適配最佳實(shí)踐　330

7.4 使用touch-action屬性控制設(shè)備的觸摸行為　335

7.5 image-set()函數(shù)與多倍圖設(shè)置　337

第8章 CSS的變量函數(shù)var()與自定義屬性　340

8.1 CSS變量的語(yǔ)法、特性和細(xì)節(jié)　340

8.2 CSS自定義屬性的設(shè)置與獲取　348

8.3 使用content屬性顯示CSS自定義屬性值的技巧　349

8.4 CSS變量的自定義語(yǔ)法技術(shù)簡(jiǎn)介　350

第9章 文本字符處理能力的升級(jí)　354

9.1 文字的美化與裝飾　354

9.2 文字的旋轉(zhuǎn)與閱讀方向　365

9.3 文本字符的尺寸控制　370

9.4 文字渲染與字體呈現(xiàn)　374

9.5 字體特征和變體　382

9.6 可變字體　395

第 10章 圖片等多媒體的處理　402

10.1 圖片和視頻元素的內(nèi)在尺寸控制　402

10.2 使用image-orientation屬性糾正圖片的方向　406

10.3 image-rendering屬性與圖像的渲染　408

10.4 不常用的圖像類型函數(shù)　411

第 11章 更絢麗的視覺表現(xiàn)　415

11.1 深入了解CSS濾鏡屬性filter　416

11.2 姐妹花濾鏡屬性backdrop-filter　429

11.3 深入了解CSS混合模式　433

11.4 混合模式屬性background-blend-mode　448

11.5 使用isolation: isolate聲明隔離混合模式　454

第 12章 更豐富的圖形處理　457

12.1 超級(jí)實(shí)用的CSS遮罩　457

12.2 同樣實(shí)用的CSS剪裁屬性clip-path　478

12.3 -webkit-box-reflect屬性與倒影效果的實(shí)現(xiàn)　492

12.4 使用offset屬性實(shí)現(xiàn)元素的不規(guī)則運(yùn)動(dòng)　496

第 13章 用戶行為與體驗(yàn)增強(qiáng)　508

13.1 滾動(dòng)行為相關(guān)　508

13.2 點(diǎn)擊行為相關(guān)　519

13.3 拉伸行為相關(guān)　521

13.4 輸入行為相關(guān)　523

13.5 選擇行為相關(guān)　524

13.6 打印行為相關(guān)　527

13.7 性能增強(qiáng)　532

第 14章 SVG元素的CSS控制　541

14.1 使用CSS屬性直接繪制SVG圖形　541

14.2 CSS屬性下的填充設(shè)置　545

14.3 CSS屬性下的描邊設(shè)置　550

14.4 CSS屬性下的標(biāo)記設(shè)置　555

第 15章 Houdini是CSS新的未來(lái)嗎　564

15.1 了解CSS Paint API　564

15.2 了解CSS Properties & Values API　568

15.3 了解CSS Parser API　570

15.4 詳細(xì)了解CSS Layout API　571

15.5 快速了解CSS Typed OM　577

15.6 簡(jiǎn)單了解Animation Worklet　578

15.7 了解Font Metrics API　579