【CSS in Depth 2 精译_079】第 13 章：渐变、阴影与混合模式概述 + 13.1：CSS 渐变效果（上）——使用多个颜色节点
当前内容所在位置（可进入专栏查看其他译好的章节内容）
- 第四部分 视觉增强技术 ✔️
- 【第 13 章 渐变、阴影与混合模式】 ✔️
- 13.1 渐变 ✔️
- 13.1.1 使用多个颜色节点（上） ✔️
- 13.1.2 颜色插值方法（中）
- 13.1.3 径向渐变（下）
- 13.1.4 锥形渐变（下）
文章目录
- 第 13 章 渐变、阴影与混合模式 Gradients, shadows, and blend modes
- 13.1 渐变 Gradients
- 13.1.1 使用多个颜色节点 Multiple color stops
- 13.1.1.1 条纹 Stripes
- 13.1.1.2 重复渐变 Repeating gradients
《CSS in Depth》新版封面
第 13 章 渐变、阴影与混合模式 Gradients, shadows, and blend modes
本章概要
- 线性渐变、径向渐变及锥形渐变
- 不同色彩空间下的颜色插值方法
- 盒阴影与文字阴影
- 背景图片的尺寸调整与定位
- 通过混合模式实现背景与内容的组合
至此，我们已经介绍了很多 CSS 知识，想必您已经对 CSS 的基本工作原理有了更深入的理解。我们不仅介绍了多种布局方法，也花了不少精力去考察如何让样式代码组织高效且易于维护，甚至还从头开始探讨了创建一个网站必备的核心要素。最后还教会您如何关注间距、排版及其他页面设计相关的细节。
接下来的两章内容将重点介绍特定页面效果的实现技巧，以及增强页面视觉趣味性的相关方法。其中一些效果您今后可能会经常用到，特别是渐变与阴影方面的内容；而其他效果可能只是偶尔会考虑。但可以肯定的是，您绝不会将所有特效都堆到一处。因此后续内容也不会创建面面俱到的综合示例页，而是聚焦单独的示例来进行讲解。
以图 13.1 所示的按钮为例，这里用到了渐变背景和投影两种特效，使页面具有了立体感。背景色从顶部的中度蓝（颜色值 #57b）过渡到了底部的深蓝（#148）。您可能甚至都没留意到这层渐变，但是再配上底部和右侧边缘的阴影效果，就让按钮整体呈现出了立体感。
【图 13.1 设置了渐变背景和阴影效果的示例按钮】
本章将重点介绍渐变与阴影的工作原理，并探讨几个实际应用。然后再介绍一种非常有意思的页面特效，称为 混合模式（blend modes）。它可以把多个背景图片和背景色按照不同的方式混合在一起使用。
13.1 渐变 Gradients
前面的章节已经介绍了纯色背景和一些背景图片的使用方法，但是 background 属性还有很多功能有待探索。其实，background 是以下八个样式属性的简写：
background-image—— 从某个文件或者生成的某个渐变色来设置一张图片。background-position—— 指定背景图片的初始位置。background-size—— 指定元素内背景图片的渲染尺寸。background-repeat—— 决定在需要填充整个元素时，是否平铺图片。background-origin—— 指定定位背景的参考系是相对于元素的边框盒border-box而言的、还是其内边距盒padding-box（初始值）、抑或是其内容盒content-box。background-clip—— 指定背景是否应该填充元素的边框盒border-box（初始值）、内边距盒padding-box或者内容盒content-box。background-attachment—— 指定背景图片是随着元素上下滚动（初始值），还是固定在视口区域。注意，值为fixed时可能会对页面性能带来消极影响。background-color—— 指定纯色背景，并渲染到背景图片的下方。
本章将介绍上述属性。此刻您需要了解的是，使用简写属性（background）虽然可以设置指定的样式，但同时也会把其他属性值重置为初始值。因此，在需要对多个背景属性进行操作时，我往往会单独设置想要的属性。
background-image 属性非常有意思。除了之前介绍的通过 URL 来引用某个图片的用法外（第 7 章中的 background-image: url(coffee-beans.jpg)），该属性还可以接受一个渐变函数。例如，定义一个从白色过渡到蓝色的渐变色，如图 13.2 所示。
【图 13.2 由一种颜色线性渐变到另一种颜色的效果示意图】
渐变是一个非常有用的特效。我们先来看看渐变的工作原理，然后在列举几个实际案例。要尝试渐变设置，需要创建一个新页面和样式表。添加代码清单 13.1 中的 CSS 样式，其中用到了 linear-gradient() 函数来定义渐变效果。
代码清单 13.1 基础线性渐变示例
.fade {height: 200px;width: 400px;background-image: linear-gradient(to right, white, blue); /* 从左至右、从白色渐变为蓝色 */
}
渐变效果其实就是背景图片，渐变本身不会影响元素的尺寸大小。为了方便演示，我给该元素明确设置了宽高。该元素是没有内容的，因此必须手动给定一个高度才能看到渐变效果。
linear-gradient 函数通过三个参数来定义渐变效果：角度（angle）、起始颜色（starting color）与终止颜色（ending color）。本例中的角度值即 to right，表示渐变效果将从元素左侧开始（即白色），平滑过渡到右侧（即蓝色）。此外，也可以采用其他颜色表示方法，例如十六进制法（#0000ff）或者 OKLCH 值（oklch(45% 0.31 264deg)）或者关键字 transparent。试根据代码清单 13.2 同步更新页面元素，查看本地渐变效果。
代码清单 13.2 带渐变背景效果的示例元素 HTML 代码
<!doctype html>
<html lang="en-US">
<head><meta charset="utf-8"><link rel="stylesheet" href="./style.css">
</head>
<body><div class="fade"></div><!-- 带渐变背景效果的示例元素 -->
</body>
</html>
CSS 提供了多种方式来指定渐变的角度值。在本例中，我们使用了 to right，当然也可以使用 to top 或者 to bottom，甚至可以指定某个对角（corner），例如 to bottom right，表示渐变效果将从元素的左上角开始，逐渐过渡到元素右下角。
为了更精确地控制角度，也可以使用更具体的单位，例如“度”。角度值 0deg 表示垂直向上（相当于 to top）；比它更大的角度值会沿着顺时针方向变动，因此 90deg 表示向右渐变，180deg 表示向下渐变，360deg 又回到了向上渐变。因此，代码清单 13.3 中的声明与前面的示例等价。
代码清单 13.3 使用度（deg）为单位的渐变示例代码
.fade {height: 200px;width: 400px;background-image: linear-gradient(90deg, white, blue); /* 这里的 90deg 相当于前面的 to right */
}
度是最常用的单位，此外还有一些其他单位可以用来表示角度值，如下所示：
rad—— 以弧度（radians）为单位，对于一个完整的圆，其弧度制为2π，约合6.2832弧度。turn—— 表示环绕圆周的圈数（full turns）。一圈相当于 360 度（即360deg）。角度不足一圈可以用小数表示，例如0.25turn相当于90deg。grad—— 以梯度（gradians）为单位，一个完整的圆是 400 梯度（即400grad），因此100grad即对应90deg。
可以尝试一下在渐变中设置不同的角度值，看看效果如何。
注意
以上介绍的角度单位适用于任意需要设置 CSS 角度值的地方，包括各种颜色表示法中的色调的角度值，例如
oklch(45% 0.31 0.75turn)就是一个合法的 OKLCH 颜色值。
13.1.1 使用多个颜色节点 Multiple color stops
大部分渐变只涉及两种颜色，从一种颜色过渡到另一个即可。也可以定义包含多个颜色的渐变效果，其中每个颜色都可以成为一个 颜色节点（color stop）。图 13.3 为包含了三种颜色节点（蓝绿色、白色、蓝色）的渐变样式示例。
【图 13.3 包含三个颜色节点的渐变色效果】
通过向 linear-gradient() 函数添加更多颜色，就可以插入多个颜色节点。试根据代码清单 13.4 所示代码同步更新样式表，然后在页面上查看渐变效果。
代码清单 13.4 包含多个颜色节点的线性渐变样式声明
.fade {height: 200px;width: 400px;background-image: linear-gradient(90deg, turquoise, white, blue); /* 指定多个颜色节点 */
}
一个渐变样式可以接受任意数量的颜色节点，各节点间通过逗号分隔。渐变函数会自动均匀平铺这些颜色节点。在本例中，最左侧（即 0% 位置）从蓝绿色开始，然后过渡到中间位置（即 50%）的白色，再到最右侧（即 100%）的蓝色。我们也可以在渐变函数中为每个颜色节点手动指定位置。例如代码清单 13.4 中的渐变样式等效于以下代码：
linear-gradient(90deg, turquoise 0%, white 50%, blue 100%)
上述代码不难看出，颜色节点的位置是可以按需调节的，不必非得均匀分布。指定具体位置时也不必非得使用百分数，换成像素单位制、相对单位 em 以及其他长度单位也是完全有效的写法。
13.1.1.1 条纹 Stripes
如果在同一个位置设置了两个颜色节点，那么渐变会直接从一种颜色变为另一种颜色，而不是平滑过渡。如图 13.4 所示的渐变色效果，从蓝绿色开始，直接变为白色，随后又变为蓝色。整体呈现条纹状。
【图 13.4 通过在同一位置放置两种颜色节点的渐变声明实现的条纹效果】
实现该渐变效果的样式代码如代码清单 13.5 所示。注意渐变中有四个颜色节点，其中两个为白色。
代码清单 13.5 同一个位置放置两个颜色节点，从而实现条纹效果
.fade {height: 200px;width: 400px;background-image: linear-gradient(90deg,/* 相同位置上的各颜色节点： */turquoise 40%, white 40% 60%, blue 60%);
}
第一个颜色节点是位于 40% 处的蓝绿色（turquoise），所以纯色效果从左侧边缘一直延伸到 40% 处；又因为第二个颜色节点为白色，且同样位于 40% 位置，因此渐变从这里开始变为白色；随后另一个白色节点位于 60% 处，从而令 40% 到 60% 之间的渐变效果均为白色。最后一个颜色节点也位于 60% 处，颜色为蓝色，因此从这里开始突变为蓝色，并一直延伸到元素右边缘。
这些颜色节点的位置同样可以换成任何有效的长度值，因此除了使用 40%，还可以换成 160px 或者 10em 等。
13.1.1.2 重复渐变 Repeating gradients
尽管前面的例子只是为了演示，但也可以用来实现一些有趣的效果，特别是搭配另一个略有不同的渐变函数 repeating-linear-gradient() 时。该函数与 linear-gradient() 函数的用法基本相同，唯一的区别在于该函数能够重复渲染。利用这一特性可以实现类似理发店门外的旋转招牌效果，非常适合作为进度条的样式（如图 13.5）。
【图 13.5 使用重复线性渐变的条纹状进度条】
对于重复渐变，最好使用特定的长度而不是百分比值，因为设置的值决定了要重复渲染的图片尺寸。相应的条纹效果样式代码详见代码清单 13.6。试根据以下代码同步更新本地样式表。
代码清单 13.6 创建沿对角线倾斜的条纹进度条
.fade {height: 1em;width: 400px;/* 浅蓝与深蓝色交替生成条纹效果 */background-image: repeating-linear-gradient(-45deg,oklch(60% 0.1 257deg) 0px 10px,oklch(40% 0.1 257deg) 10px 20px);border-radius: 0.3em;
}
有时，将一个半成品的代码片段改造成自己需要的效果，比从零开始实现要容易一些。您可以在 CSS-TRICKS 网站的这篇 Stripes in CSS 文章中找到更多灵感。
关于《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 本章小结
- 附录
- 附录A：CSS 选择器参考
- 附录B：CSS 预处理器简介