CSS：权威指南，第 5 版

第 9 章 梯度 梯度

本作品已使用人工智能进行翻译。欢迎您提供反馈和意见：[e-mail]

CSS 定义的三种图像类型完全由 CSS 描述：线性渐变、径向渐变和圆锥形渐变。 每种类型都有两种子类型：重复和不重复。渐变最常用于背景，但也可用于任何允许使用图像的场合，例如list-style-image 和border-image 。

渐变是从一种颜色到另一种颜色的视觉过渡。从黄色到红色的渐变将从黄色开始，依次经过较淡的黄色、较红的橙色，最终到达完全的红色。过渡的渐变或突变程度取决于渐变的空间大小，以及您定义颜色停止点和渐变颜色提示的方式。如图 9-1 所示，如果从白色到黑色的渐变超过 100 个像素，那么沿着渐变的默认渐变，每个像素的灰色都会加深 1%。

图 9-1. 简单梯度的变化过程

在我们探索渐变的过程中，请始终牢记：渐变是图像。用 CSS 来描述它们并不重要--它们和 SVG、PNG、JPEG 等一样都是图像，但渐变具有出色的渲染性能，加载时不需要额外的 HTTP 请求，而且可以无限扩展。

关于渐变的有趣之处在于，它们没有内在尺寸。如果使用background-size 属性的值auto ，它就会被当作100% 处理。因此，如果您没有为背景渐变定义background-size ，它将被设置为默认值auto ，这与声明100% 100% 是一样的。因此，默认情况下，背景渐变会填充整个背景定位区域。请注意，如果您使用长度（而不是百分比）值偏移渐变的背景位置，默认情况下它将平铺。

线性渐变

线性渐变是 沿着线性矢量（即渐变线）进行的渐变填充。下面是几个相对简单的渐变，效果如图 9-2 所示：

#ex01 {background-image: linear-gradient(purple, gold);}
#ex02 {background-image: linear-gradient(90deg, purple, gold);}
#ex03 {background-image: linear-gradient(to left, purple, gold);}
#ex04 {background-image: linear-gradient(-135deg, purple, gold, navy);}
#ex05 {background-image: linear-gradient(to bottom left, purple, gold, navy);}

图 9-2. 简单的线性梯度

第一种是最基本的渐变：两种颜色。这将导致从背景绘画区域顶部的第一种颜色到背景绘画区域底部的第二种颜色的渐变。

根据的默认设置，渐变是自上而下进行的，因为渐变的默认方向是to bottom ，它与180deg 及其各种等价物（例如0.5turn ）相同。如果你想换个方向，可以在梯度值的开头加上一个方向。图 9-2 中显示的其他梯度都是这样做的。

梯度必须至少有两个色站。不过，它们可以是同一种颜色。如果只想在部分内容后面使用纯色，则可以使用两次声明相同颜色的渐变，并设置背景大小和无重复， ...