●章 概述  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 用过都说好的继承关键字inherit  12 2.3.2 可以一用的初始值关键字initial  12 2.3.3 了解一下不固定值关键字unset  14 2.3.4 我个人很喜欢的恢复关键字revert  15 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/end元素  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逻辑属性inset  46 3.3 在CSS边框上做文章  47 3.3.1 昙花一现的CSS多边框  47 3.3.2 无二的border-image属性  47 3.3.3 border-image属性与渐变边框  57 3.4 ition属性的增强  60 3.4.1 深入了解sticky属性值与黏性定位  61 3.4.2 ition:sticky声明的精彩应用—层次滚动  65 3.5 font-family属性和@font-face规则新特性  66 3.5.1 systei等全新的通用字体族  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. 与精确换行的控制  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-ition: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-ition的起始方位了  114 3.11 outline相关新属性outline-offset  116 3.12 cursor属性新增的手形效果  117 3.12.1 放大手形zoom-in和缩小手形zoom-out简介  117 3.12.2 抓取手形grab和放手手形grabbing简介  118 第4章 更细致的样式表现  119 4.1 透明度控制属性opacity  119 4.1.1 opacity属性的叠加计算规则  119 4.1.2 opacity属性的边界特性与应用  120 4.2 深入了解圆角属性border-radius  124 4.2.1 了解border-radius属性的语法  124 4.2.2 弄懂圆角效果是如何产生的  12.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 元素应用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-self  234 6.2.8 align-content属性与整体布局的垂直对齐  236 6.2.9 order属性与单个子项的顺序控制  238 6.2.10 必读：深入理解flex属性  238 6.2.11 应该在什么时候使用flex:0/1/none/auto  243 6.2.12 详细了解flex-basis属性与尺寸计算规则  250 6.2.13 弹性布局后一行不对齐的处理  258 6.3 网格布局  263 6.3.1 grid-template-columns和grid-template-rows属性简介  2 6.3.2 了解网格布局专用单位fr  269 6.3.3 详细介绍minmax()和fit-content()函数  271 6.3.4 repeat()函数的详细介绍  273 6.3.5 了解grid-template-areas属性  278 6.3.6 缩写属性grid-template  279 6.3.7 了解grid-auto-columns和grid-auto-rows属性  282 6.3.8 深入了解grid-auto-flow属性  283 6.3.9 缩写属性grid  286 6.3.10 间隙设置属性column-gap和row-gap（grid-column-gap和grid- row-gap）  288 6.3.11 缩写属性gap（grid-gap）  289 6.3.12 元素对齐属性justify-items和align-items  290 6.3.13 缩写属性place-items  294 6.3.14 整体对齐属性justify-content和align-content  294 6.3.15 缩写属性place-content  297 6.3.16 区间范围设置属性grid-column-start/grid-column-end和grid-row-start/ grid-row-end  298 6.3.17 缩写属性grid-column和grid-row  303 6.3.18 缩写属性grid-area外加区域范围设置  304 6.3.19 grid子项对齐属性justify-self和align-self  307 6.3.20 缩写属性place-self  307 CSS Shapes布局  308 .1 详细了解shape-outside属性  308 .2 了解shape-margin属性  313 .3 了解shape-image-threshold属性  314 .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-shadow  354 9.1.2 文字描边属性text-stroke  355 9.1.3 文字颜色填充属性text-fill-color  358 9.1.4 学会使用text-emphasis属性进行强调装饰  362 9.2 文字的旋转与阅读方向  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属性到底有没有用  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-smooth  376 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-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 0章 图片等多媒体的处理  402 10.1 图片和元素的内在尺寸控制  402 10.1.1 好用的object-fit属性  403 10.1.2 理解object-ition属性的作用规则  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 1章 更绚丽的视觉表现  415 11.1 深入了解CSS滤镜属性filter  416 11.1.1 filter属性支持的滤镜函数详解  416 11.1.2 更进一步的滤镜技术  427 11.1.3 引用SVG滤镜技术  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 详细了解各种混合模式效果  434 11.3.2 滤镜和混合模式的化合反应  446 11.4 混合模式属性background-blend-mode  448 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 2章 更丰富的图形处理  457 12.1 实用的CSS遮罩  457 12.1.1 mask-image属性的详细介绍  457 12.1.2 mask-mode属性的简单介绍  4 12.1.3 mask-repeat属性的简单介绍  465 12.1.4 mask-ition属性的简单介绍  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-comite属性的详细介绍  469 12.1.10 CSS遮罩的一些经典应用示例  472 12.1.11 了解-webkit-mask-bomage和mask-border属性  475 12.2 同样实用的CSS剪裁属性clip-path  478 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-ition属性  505 12.4.6 理解offset-rotate属性  506 3章 用户行为与体验增强  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-action  521 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. 了解@page规则  532 13.7 性能增强  532 13.7.1 慎用will-change属性提高动画性能  533 13.7.2 深入了解contain属性  535 13.7.3 content-visibility属性  540 4章 SVG元素的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 5章 Houdini是CSS新的未来吗  5 15.1 了解CSS Paint API  5 15.1.1 CSS变量让CSS Paint API如虎添翼  567 15.1.2 简单的总结  568 15.2 了解CSS Properties & Values API  568 15.3 了解CSS Parser API  570 15.4 详细了解CSS Layout API  571 15.4.1 layout()函数的参数之间的逻辑关系  573 15.4.2 文本居中同时一侧对齐的布局案例  575 15.5 快速了解CSS Typed OM  577 15.6 简单了解Animation Worklet  578 15.7 了解Font Metrics API  579