使用 CSS 渐变

CSS 渐变由 <gradient> 数据类型表示，它是 <image> 的一种特殊类型，由两种或多种颜色之间的渐变过渡构成。你可以选择三种类型的渐变：线性（由 linear-gradient() 函数创建）、径向（由 radial-gradient() 函数创建）和锥形（由 conic-gradient() 函数创建）。你还可以使用 repeating-linear-gradient() 和 repeating-conic-gradient() 函数创建重复渐变。

渐变可以在任何使用 <image> 的地方使用，例如在背景中。由于渐变是动态生成的，因此可以消除对传统用于实现类似效果的栅格图像文件的需求。此外，由于渐变是由浏览器生成的，因此在放大时看起来比栅格图像更好，并且可以动态调整大小。

我们将从线性渐变开始介绍，然后以线性渐变为例介绍所有渐变类型支持的功能，然后继续介绍径向渐变、锥形渐变和重复渐变。