【CSS in Depth 2 精译_093】16.2：CSS 变换在动效中的应用（上）—

当前内容所在位置（可进入专栏查看其他译好的章节内容）

第五部分添加动效 ✔️
【第 16 章变换】 ✔️
16.1 旋转、平移、缩放与倾斜
16.1.1 变换原点的更改
16.1.2 多重变换的设置
16.1.3 单个变换属性的设置

16.2 变换在动效中的应用 ✔️
16.2.1 放大图标（上） ✔️
16.2.2 带“飞入”特效的文本标签的创建（下）
16.2.3 过渡特效的交错渲染（下）

文章目录

- 16.2 变换在动效中的应用 Transforms in motion
- - 16.2.1 放大图标 Scaling up the icon

《CSS in Depth》新版封面

《CSS in Depth》新版封面

译者按
本篇开始结合具体案例演示变换效果与过渡特效的实际应用。按照作者的说法，后续内容会大量引入 CSS 动效，鉴于篇幅过长，还是分为上下两篇来介绍。本篇为上篇，主要包含了示例页导航菜单的基本结构和放大、过渡特效的实现。今天刚好博客等级升到 7 级了，感觉持续输出优质内容的努力有了些许回报，同时肩上的担子也变重了：至少在巩固 CSS 基础方面，不能传递一个错误信号：为了“在年底到来前学完整本书” 的小目标而囫囵吞枣，对后面的学习和翻译敷衍了事。毕竟，善始者实繁，而克终者盖寡。希望大伙都能戒骄戒躁，认真消化这两章的精华内容。

16.2 变换在动效中的应用 Transforms in motion

变换本身并不是特别实用。虽然添加了 skew() 变换的内容框看上去可能很有趣，但并不适合文字阅读。但是，当与动效结合起来使用的时候，变换就有用多了。

本节将创建一个新页面来实践这种用法。最终的页面效果如图 16.5 所示。我们会给页面添加很多动态效果。

图 16.5 左侧的导航菜单图标将包含几个变换和过渡效果

【图 16.5 左侧的导航菜单图标将包含几个变换和过渡效果】

本节我们将实现左侧的导航菜单部分。初始状态下，菜单只有四个纵向排列的图标；但只要鼠标悬停上去，菜单文字就会出现。这个示例包含了几个过渡与变换效果。我们先来实现页面，然后再进一步研究导航菜单部分（下一章我们会实现中间主区域的卡片部分，并为其添加更多的变换与动画特效）。

新建一个页面并关联一个新的样式表 style.css，然后添加代码清单 16.5 中的 HTML 标记。该代码包含了一个谷歌字体的 API 链接，引用了两款 Web 字体（即 Alfa Slab One 和 Raleway）。此外还包含页头和导航菜单部分的 HTML 标记。

代码清单 16.5 带动态变换效果的示例页 HTML 标记

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>The Yolk Factory</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Raleway&display=fallback"
      rel="stylesheet"><!-- 为页面添加  Alfa Slab One 与 Raleway 两款字体 -->
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <header>
      <h1 class="page-header">The Yolk Factory</h1>
    </header>
    <nav class="main-nav">
      <ul class="nav-links">
        <li>
          <a href="/"><!-- 每个导航链接分别包含一张图片和一段文本标签 -->
            <img src="images/home.svg" class="nav-links__icon"/>
            <span class="nav-links__label">Home</span>
          </a>
        </li>
        <li>
          <a href="/events"><!-- 每个导航链接分别包含一张图片和一段文本标签 -->
            <img src="images/calendar.svg" class="nav-links__icon"/>
            <span class="nav-links__label">Events</span>
          </a>
        </li>
        <li>
          <a href="/members"><!-- 每个导航链接分别包含一张图片和一段文本标签 -->
            <img src="images/members.svg" class="nav-links__icon"/>
            <span class="nav-links__label">Members</span>
          </a>
        </li>
        <li>
          <a href="/about"><!-- 每个导航链接分别包含一张图片和一段文本标签 -->
            <img src="images/star.svg" class="nav-links__icon"/>
            <span class="nav-links__label">About</span>
          </a> 
        </li> 
      </ul> 
    </nav>
  </body>
</html>

上述代码中，nav 元素占据了绝大部分篇幅，其中有个带链接的无序列表（<ul>）。每个链接都由一个图标图片和一个文本标签构成。注意，这里的图标图片是 SVG 格式的。后面您就会知道这一点很重要，届时我们将在第 17 章为页面添加更多内容。

关于 SVG 的定义

SVG —— 全称为 Scalable Vector Graphics，即可缩放矢量图形。这是一种基于 XML 的图片格式，利用矢量（vectors）来定义图片。由于图片是使用数学计算得到的，因此可以无损地缩放到任意尺寸。

接下来我们添加一些基础样式，包括背景渐变标题区域的内边距，同时在为页面引入 Web 字体。请根据代码清单 16.6 同步更新本地样式表。这些都是页面的全局样式以及页头的一些模块层样式。菜单部分的布局设置后面再说。

代码清单 16.6 页面全局样式及页头模块的示例样式代码

@layer reset, theme, global, modules;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: unset;
  }

  img {
    max-inline-size: 100%;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer theme {
  :root {
    --bg-color-1: oklch(47% 0.1 238deg);
    --bg-color-2: oklch(32% 0.08 238deg);
    --font-color: white;
    --accent-yellow: oklch(87% 0.13 83deg);
  }
}

@layer global {
  body {
    min-block-size: 100dvh; /* 确保 body 元素填满视口，实现渐变特效的全覆盖 */
    background-color: var(--bg-color-1);
    background-image: radial-gradient( /* 深蓝色背景渐变效果 */
      var(--bg-color-1),
      var(--bg-color-2)
    );
    color: var(--font-color);
    font-family: Raleway, Helvetica, Arial, sans-serif;
    line-height: 1.4;
  }

  h1,
  h2,
  h3 {
    font-family: "Alfa Slab One", serif;
    font-weight: 400;
  }
}

@layer modules {
  .page-header {
    margin-block: unset;
    padding: 1rem; /* 让页头模块在移动端视口下减少内边距 */
  }

  @media (min-width: 480px) {
    .page-header {
      padding: 2rem 2rem 3rem; /* 让页头模块在较大的视口中相应调大内边距 */
    }
  }
}

本例应用了前面章节的很多知识点。body 元素的背景样式采用了径向渐变，可以给页面带来些许立体感。标题文字采用的是 Web 字体 Alfa Slab One，而正文部分则使用 Raleway 字体。此外还利用媒体查询实现了页头部分的响应式设计，当屏幕尺寸允许的情况下适度增大了内边距。

而菜单部分的样式设计则需要分为以下几个步骤。首先完成菜单布局，然后提供一些响应式行为。我们将采用移动端优先（详见第 7 章）的实现方案，因此最好从小尺寸视口开始设计。最终标题和菜单项要实现的页面效果，如图 16.6 所示。

图 16.6 导航菜单的移动端设计效果图

【图 16.6 导航菜单的移动端设计效果图】

鉴于小尺寸屏上的导航链接是水平排列的，使用 Flexbox 布局比较合适。只要在弹性容器上声明 align-content: space-between，导航菜单项就可以在整个页面宽度上均匀分布。然后再设置字体颜色并对齐图标。请根据代码清单 16.7 同步更新本地样式表。

代码清单 16.7 移动端导航菜单的示例样式代码

@layer modules {
 .nav-links {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 让导航菜单项水平均匀展布 */
    gap: 0.8em;
    margin-block: 0 1rem;
    padding-inline: 1rem;
    list-style: none;
  }
  .nav-links > li > a {
    display: block;
    padding-block: 0.8em;
    color: white;
    font-size: 0.8rem;
    /* 为链接文字设计样式： */
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .nav-links__icon {
    height: 1.5em;
    width: 1.5em;
    vertical-align: -0.2em; /* 图标略微下移，与文本标签对齐 */
  }
  .nav-links > li > a:hover {
    color: var(--accent-yellow);
  }
}

这样就实现了小尺寸屏上的导航菜单效果；而屏幕越大，可以添加的特效相应就更多。对于桌面端布局，可以用固定定位让导航菜单停靠在屏幕左侧，效果看上去如图 16.7 所示。

图 16.7 停靠在大尺寸屏左侧的导航菜单效果图

【图 16.7 停靠在大尺寸屏左侧的导航菜单效果图】

此时的菜单由两个模块组成，即已经命名的外层元素 main-nav，以及名为 nav-links 的内部结构。其中 main-nav 为容器元素，需要固定在左侧，并提供了深色背景。下面就来实现一版。

请根据代码清单 16.8 同步更新本地样式表，注意第二个媒体查询及其内容需要放到 nav-links 样式的后面，这样才能在查询条件生效时有效覆盖对应的移动端样式。

代码清单 16.8 大尺寸屏下定位导航菜单的示例样式代码

@layer modules {
  @media (min-width: 480px) { /* 该样式规则仅对大中型屏幕生效 */
    .main-nav {
      position: fixed;
      top: 8.25rem;
      left: 0;
      z-index: 10; /* 确保导航菜单渲染到后续新增内容的上一层 */
      background-color: transparent; /* 令初始背景色为透明 */
      transition: background-color 0.5s linear; /* 为背景色设置过渡特效 */
      border-top-right-radius: 0.5em;
      border-bottom-right-radius: 0.5em;
    }
    .main-nav:hover,
    .main-nav:focus-within {
      background-color: rgb(0 0 0 / 0.6); /* 鼠标悬停时，背景色变为深色半透明效果 */
    }
  }

  .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 0.8em;
    margin-block: 0 1rem;
    padding-inline: 1rem;
    list-style: none;
  }
  .nav-links > li > a {
    display: block;
    padding-block: 0.8em;
    color: white;
    font-size: 0.8rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .nav-links__icon {
    height: 1.5em;
    width: 1.5em;
    vertical-align: -0.2em;
  }
  .nav-links > li > a:hover,
  .nav-links > li > a:focus {
    color: var(--accent-yellow);
  }

  @media (min-width: 480px) { /* 覆盖移动端的 Flexbox 布局，让各链接纵向排列 */
    .nav-links {
      display: block;
      padding: 1em;
      margin-block-end: 0;
    }
    .nav-links__label {
      margin-left: 1em;
    }
  }
}

导航菜单通过声明 position: fixed 进行固定定位，即便页面滚动其位置也不受影响；而 display: block 规则覆盖了移动端下的 display:flex，从而令菜单项垂直叠放在一起。

Now you can start layering in some transition and transform effects. For that, you’ll do three things:
现在你可以开始添加一些过渡和变换效果。为此，你需要做三件事：

一切就绪后，就可以添加过渡和变换效果了。为此，需要实现以下三个功能：

鼠标划过链接时，图标元素需要放大；
先隐藏链接标签，直到用户鼠标悬停到菜单上时，才将其全部展示出来，并设置淡入（fade-in）的过渡特效。
利用平移变换给链接标签添加 “飞入”（“fly in”）效果，并与淡入特效相结合。

下面来逐一实现这些功能点。

16.2.1 放大图标 Scaling up the icon

先来看看导航链接的 HTML 结构。每个列表项都包含一个链接元素（<a>），链接里面又包含了一个图标和一个标签：

<li>
  <a href="/">
    <img src="images/home.svg" class="nav-links__icon"/>
    <span class="nav-links__label">Home</span>
  </a>
</li>

注意

由于列表项要与父元素 <ul> 组合在一起使用，构建出的模块就比我预想中的体积更大，嵌套层级也更深。我也考虑过将其拆分为较小的模块，但眼下还是有必要将它们放在一起，这样方便对其整体设置特效。

我们先来实现鼠标悬停时的图标放大效果。这里要用到缩放变换，然后设置过渡特效，实现变换过程的平稳流畅（seamlessly）。如图 16.8 所示，当鼠标悬停在 Events 菜单项上时，该图标会稍微放大一些。

图 16.8 鼠标悬停到某链接后，其对应图标略微放大

【图 16.8 鼠标悬停到某链接后，其对应图标略微放大】

Events 的图标具有固定的宽高，因此可以调大这些属性值来尝试放大图标。但这样会导致文档流重新计算，使得周围一些元素跟着移动。

如果改用变换（transform），周围的元素则不受任何影响，Events 的文本标签部分也不会向右移动。请根据代码清单 16.9 同步更新样式表，让下列样式在元素悬停（通过鼠标操作）或聚焦（通过键盘操作）时都能生效。

代码清单 16.9 图标链接在悬停或聚焦时放大的示例样式代码

@media (min-width: 30em) {
  .nav-links {
    display: block;
    padding: 1em;
    margin-block-end: 0;
  }
  .nav-links__label {
    margin-left: 1em;
  }

  .nav-links__icon {
    transition: scale 0.2s ease-out; /* 为 transform 属性设置过渡特效 */
  }

  .nav-links a:hover > .nav-links__icon,
  .nav-links a:focus > .nav-links__icon {
    scale: 1.3; /* 增大图标尺寸 */
  }
}

这样，当鼠标划过菜单项，您将看到对应的图标会变大一些，帮助用户确认正在悬停的菜单项。这里特意使用了 SVG 图片资源，这样在图片尺寸变化时就不会出现像素颗粒或者其他奇怪的失真感。缩放变换效果是实现该功能点的绝佳方案。

SVG：一种更好的图标解决方案（SVG: A better approach to icons）

图标在某些设计的重要组成部分。图标的使用技巧也一直在进化。很长一段时间里，使用图标的最佳实践，是把所有图标放入单个图片文件，并称之为 精灵图（sprite sheet）。然后利用 CSS 背景图片，小心翼翼地调整尺寸大小和背景位置，在元素中渲染出精灵图上的某个图标。

后来，图标字体（icon font） 开始流行起来。这种解决方案不再把图标嵌入精灵图，而是将每个图标作为字符嵌入一个自定义的字体文件中。通过使用 Web 字体，单个字符将被渲染成图标。像 Font Awesome 这样的一些线上服务还提供了几百个通用图标来简化这一过程，但使用这种方法也存在一些无障碍浏览方面的问题（accessibility concerns）。

尽管这些技术仍然有效，但我还是建议您使用 SVG 图标。SVG 功能更强大，性能也更好。SVG 既可以像本章演示的那样作为 <img> 的源（source）来使用，同时也提供了其他用法。我们可以创建一个 SVG 精灵图，或者利用 SVG 本就是基于 XML 的文件格式这一本质特征，直接将其嵌入 HTML 页面中，例如：
<li>
  <a href="/">
    <svg class="nav-links__icon" width="20" height="20" viewBox="0 0 20 20">
      <path fill="#ffffff" d="M19.871 12.165l-8.829-9.758c-0.274-0.303-0.644-0.47-1.042-0.47-0 0 0 0 0 0-0.397 0-0.767 0.167-1.042 0.47l-8.829 9.758c-0.185 0.205-0.169 0.521 0.035 0.706 0.096 0.087 0.216 0.129 0.335 0.129 0.136 0 0.272-0.055 0.371-0.165l2.129-2.353v8.018c0 0.827 0.673 1.5 1.5 1.5h11c0.827 0 1.5-0.673 1.5-1.5v-8.018l2.129 2.353c0.185 0.205 0.501 0.221 0.706 0.035s0.221-0.501 0.035-0.706zM12 19h-4v-4.5c0-0.276 0.224-0.5 0.5-0.5h3c0.276 0 0.5 0.224 0.5 0.5v4.5zM16 18.5c0 0.276-0.224 0.5-0.5 0.5h-2.5v-4.5c0-0.827-0.673-1.5-1.5-1.5h-3c-0.827 0-1.5 0.673-1.5 1.5v4.5h-2.5c-0.276 0-0.5-0.224-0.5-0.5v-9.123l5.7-6.3c0.082-0.091 0.189-0.141 0.3-0.141s0.218 0.050 0.3 0.141l5.7 6.3v9.123z"></path>
    </svg>
    <span class="nav-links__label">Home</span>
  </a>
</li>
如有必要，也可以直接选中 SVG 中的某个部分设置 CSS 样式。使用常规的 CSS 就可以动态调整 SVG 不同部分的颜色，甚至改变其大小和位置。同时 SVG 的文件体积更小，因为它不同于 GIF、PNG 这些像素化的图片或者其他基于光栅的（raster-based）图片格式。

如果您不太熟悉 SVG，可以查看 CSS-TRICKS 网站的这篇《Using SVG》，其中介绍了在 Web 页面使用 SVG 的多种方式，是个不错的入门资料。

现在图标看上去可以了，接下来让我们把注意力转向它旁边的文本标签。

译注：ChatGPT 对 Web 字体无障碍浏览问题的解读

问：Web 字体据说存在无障碍浏览方面的问题？

答：是的，Web 字体在无障碍浏览方面确实可能存在一些问题。以下是主要的关注点及其解决方案：

关注点问题描述解决方案
加载延迟 Web 字体可能需要时间加载，这会导致文本内容在初次渲染时显示为后备字体，影响用户体验。使用 font-display: swap; 属性，以便在 Web 字体加载时先显示后备字体，减少内容不可见的时间。
可读性一些 Web 字体的设计可能降低可读性，尤其对有视觉障碍的用户来说，复杂的字形可能难以识别。选择简单、清晰的字体，确保足够的对比度，并考虑使用无衬线字体，通常更易读。
兼容性问题某些屏幕阅读器可能无法正确识别或朗读使用 Web 字体显示的文本。使用广泛支持的字体，确保页面在不同设备和浏览器中表现一致。
字体特性一些装饰性字体可能包含复杂的字形或不常见的字符，这可能对有阅读障碍的用户造成困扰。避免使用过于复杂或艺术化的字体，选择设计简洁的字体。
后备字体如果 Web 字体无法加载，文本可能会显示为后备字体，影响视觉一致性。为每种字体定义后备字体，确保文本在任何情况下都能正常显示。

结论

Web 字体可以增强网站的视觉吸引力，但在实现无障碍浏览时，需要谨慎选择和使用。通过优化字体加载、选择易读的字体和确保兼容性，可以提升所有用户的体验，尤其是有特殊需求的用户。

关注点	问题描述	解决方案
加载延迟	Web 字体可能需要时间加载，这会导致文本内容在初次渲染时显示为后备字体，影响用户体验。	使用 `font-display: swap;` 属性，以便在 Web 字体加载时先显示后备字体，减少内容不可见的时间。
可读性	一些 Web 字体的设计可能降低可读性，尤其对有视觉障碍的用户来说，复杂的字形可能难以识别。	选择简单、清晰的字体，确保足够的对比度，并考虑使用无衬线字体，通常更易读。
兼容性问题	某些屏幕阅读器可能无法正确识别或朗读使用 Web 字体显示的文本。	使用广泛支持的字体，确保页面在不同设备和浏览器中表现一致。
字体特性	一些装饰性字体可能包含复杂的字形或不常见的字符，这可能对有阅读障碍的用户造成困扰。	避免使用过于复杂或艺术化的字体，选择设计简洁的字体。
后备字体	如果 Web 字体无法加载，文本可能会显示为后备字体，影响视觉一致性。	为每种字体定义后备字体，确保文本在任何情况下都能正常显示。

关于《CSS in Depth》（中译本书名《深入解析 CSS》）

	第 1 版	第 2 版
读者评分	原版：4.7（亚马逊）；中文版：9.3（豆瓣）	原版：5.0（亚马逊）；中文版：暂无，待出版
出版时间	原版：2018 年 3 月；中文版：2020 年 4 月	原版：2024 年 7 月；中文版：暂无，待出版
原价	原版：$44.99；中文版：￥139.00	原版：$59.99；中文版：暂无，待出版
现价	原版：$36.49；中文版：￥52.54 起步	原版：$52.09；中文版：暂无，待出版
原版国内预订	起步价￥461.00	起步价￥750.00

本专栏为该书第 2 版高分译文专栏，全网首发，精译精校，持续更新，计划今年内完成全书翻译，敬请期待！！！

目前已完结的章节（可进入本专栏查看详情，连载期间完全免费）：

第一章层叠、优先级与继承（已完结）
1.1 层叠
1.2 继承
1.3 特殊值
1.4 简写属性
1.5 CSS 渐进式增强技术
1.6 本章小结

第二章相对单位（已完结）
2.1 相对单位的威力
2.2 em 与 rem
2.3 告别像素思维
2.4 视口的相对单位
2.5 无单位的数值与行高
2.6 自定义属性
2.7 本章小结

第三章文档流与盒模型（已完结）
3.1 常规文档流
3.2 盒模型
3.3 元素的高度
3.4 负的外边距
3.5 外边距折叠
3.6 容器内的元素间距问题
3.7 本章小结

第四章 Flexbox 布局（已完结）
4.1 Flexbox 布局原理
4.2 弹性子元素的大小
4.3 弹性布局的方向
4.4 对齐、间距等细节处
4.5 本章小结

第五章网格布局（已完结）
5.1 构建基础网格
5.2 网格结构剖析（上）
5.2.1 网格线的编号（下）
5.2.2 网格与 Flexbox 配合（下）

5.3 两种替代语法
5.3.1 命名网格线
5.3.2 命名网格区域

5.4 显式网格与隐式网格（上）
5.4.1 添加变化（中）
5.4.2 让网格元素填满网格轨道（下）

5.5 子网格（全新增补内容）
5.6 对齐相关的属性
5.7 本章小结

第六章定位与堆叠上下文（已完结）
6.1 固定定位
6.1.1 创建一个固定定位的模态对话框
6.1.2 在模态对话框打开时防止屏幕滚动
6.1.3 控制定位元素的大小

6.2 绝对定位
6.2.1 关闭按钮的绝对定位
6.2.2 伪元素的定位问题

6.3 相对定位
6.3.1 创建下拉菜单（上）
6.3.2 创建 CSS 三角形（下）

6.4 堆叠上下文与 z-index
6.4.1 理解渲染过程与堆叠顺序（上）
6.4.2 用 z-index 控制堆叠顺序（上）
6.4.3 深入理解堆叠上下文（下）

6.5 粘性定位
6.6 本章小结

第七章响应式设计（已完结）
7.1 移动端优先设计原则（上篇）
7.1.1 创建移动端菜单（下篇）
7.1.2 给视口添加 meta 标签（下篇）

7.2 媒体查询（上篇）
7.2.1 深入理解媒体查询的类型（上篇）
7.2.2 页面断点的添加（中篇）
7.2.3 响应式列的添加（下篇）

7.3 流式布局
7.4 响应式图片
7.5 本章小结

第八章层叠图层及其嵌套
8.1 用 layer 图层来操控层叠规则（上篇）
8.1.1 图层的定义（上篇）
8.1.2 图层的顺序与优先级（下篇）
8.1.3 revert-layer 关键字（下篇）

8.2 层叠图层的推荐组织方案
8.3 伪类 :is() 和 :where() 的用法
8.4 CSS 嵌套的使用
8.4.1 嵌套选择器的使用
8.4.2 深入理解嵌套选择器
8.4.3 媒体查询及其他 @规则的嵌套

8.5 本章小结

第九章 CSS 的模块化与作用域
9.1 模块的定义
9.1.1 模块和全局样式
9.1.2 一个简单的 CSS 模块
9.1.3 模块的变体
9.1.4 多元素模块

9.2 将模块组合为更大的结构
9.2.1 模块中多个职责的拆分
9.2.2 模块的命名

9.3 CSS 的作用域
9.3.1 CSS 作用域的就近原则
9.3.2 划定作用域的边界
9.3.3 CSS 中的隐式作用域
9.3.4 关于 CSS 作用域与层叠图层

9.4 CSS 模式库
9.5 本章小结

第十章 CSS 容器查询
10.1 容器查询的一个简单示例
10.1.1 容器尺寸查询的用法

10.2 深入理解容器
10.2.1 容器的类型
10.2.2 容器的名称
10.2.3 容器与模块化 CSS

10.3 与容器相关的单位
10.4 容器样式查询的用法
10.4.1 将模块与所在容器解耦
10.4.2 减少重复代码

10.5 本章小结

第 11 章颜色与对比
11.1 通过对比进行交流
11.1.1 模式的建立
11.1.2 还原设计稿

11.2 颜色的定义
11.2.1 色域与色彩空间
11.2.2 CSS 颜色表示法（RGB、Hex、HSL、HWB、LAB/OKLAB、LCH/OKLCH）

11.3 利用 OKLCH 处理颜色（上篇）
11.3.4 从页面其他颜色衍生出新颜色（下篇）

11.4 思考字体颜色的对比效果
11.5 本章小结

第 12 章 CSS 排版与间距
12.1 间距设置
12.1.1 使用 em 还是 px
12.1.2 对行高的深入思考
12.1.3 行内元素的间距设置

12.2 Web 字体
12.3 谷歌字体
12.4 @font-face 的工作原理
12.4.1 字体格式与回退处理
12.4.2 同一字型的多种变体形式

12.5 性能因素考量
12.5.1 font-display 属性解析
12.5.2 可变字体的用法

12.6 调整字间距，提升可读性
12.6.1 正文的字间距
12.6.2 标题、小元素和间距

12.7 本章小结

第 13 章渐变、阴影与混合模式
13.1 渐变
13.1.1 使用多个颜色节点（上）
13.1.2 颜色插值方法（中）
13.1.3 径向渐变（下）
13.1.4 锥形渐变（下）

13.2 阴影
13.2.1 利用渐变和阴影打造立体感
13.2.2 使用扁平化设计创建元素
13.2.3 创建混合风格的按钮外观

13.3 混合模式
13.3.1 为图片上色
13.3.2 混合模式的类型
13.3.3 图片纹理的添加
13.3.4 融合混合模式的用法

13.4 本章小结

第 14 章蒙版、形状与剪切
14.1 滤镜
14.1.1 滤镜的类型
14.1.2 背景滤镜

14.2 蒙版
14.2.1 带渐变效果的蒙版特效
14.2.2 基于亮度来定义蒙版
14.2.3 其他蒙版属性

14.3 剪切路径
14.3.1 多边形的裁剪路径
14.3.2 Firefox 内置的剪切路径工具
14.3.3 其他剪切路径类型

14.4 浮动与形状
14.4.1 浮动
14.4.2 形状的定义

14.5 本章小结

第 15 章过渡
15.1 状态间的由此及彼
15.2 定时函数
15.2.1 定制贝塞尔曲线
15.2.2 阶跃

15.3 非动画属性
15.3.1 不可添加动画效果的属性
15.3.2 淡入与淡出

15.4 过渡到自然高度
15.5 自定义属性的过渡设置
15.6 本章小结

附录
附录A：CSS 选择器参考
附录B：CSS 预处理器简介