渐变

CSS 播客 - 第 021 集：渐变

假设您要构建一个网站，并且在顶部有一个包含标题、摘要和按钮的介绍。设计师已提交此片头的紫色背景设计。 唯一的问题是，背景采用了两种紫色作为渐变色。如何实现？

您可能最初会认为，为此您需要从设计工具中导出图片，但您可以改用 linear-gradient。

渐变是图片，可在任何可以使用图片的地方使用，但它是使用 CSS 创建的，由颜色、数字和角度组成。借助 CSS 渐变，您可以通过混合和重复多个渐变来制作各种内容，从两种颜色之间的平滑渐变到令人印象深刻的图形。

线性渐变

linear-gradient() 函数会以渐进的方式生成两个或更多颜色的图片。它接受多个参数，但在最简单的配置中，您可以像这样传递一些颜色，它会自动均匀地拆分这些颜色，同时对它们进行混合。

.my-element {
    background: linear-gradient(black, white);
}

您还可以传递角度或表示角度的关键字。如果您选择使用关键字，请在 to 关键字后指定方向。这意味着，如果您想要从左侧（黑色）向右侧（白色）延伸的黑白渐变，则应将角度指定为第一个参数 to right。

.my-element {
    background: linear-gradient(to right, black, white);
}

定义颜色停止的位置并与相邻颜色混合的颜色停止点值。 如果渐变从深红色开始，以 45 度角运行，在渐变大小的 30% 处更改为较浅的红色，则如下所示。

.my-element {
    background: linear-gradient(45deg, darkred 30%, crimson);
}

您可以在 linear-gradient() 中添加任意数量的颜色和颜色停止点，并且可以通过以英文逗号分隔各个渐变来将渐变叠加在一起。

径向渐变

如需创建以圆形方式辐射的渐变，请使用 radial-gradient() 函数。它与 linear-gradient() 类似，但您可以选择指定位置和结束形状，而不是指定角度。如果您仅指定颜色，radial-gradient() 会自动选择 center 作为位置，并根据方框的大小选择圆形或椭圆形。

.my-element {
    background: radial-gradient(white, black);
}

渐变的使用方式类似于使用关键字和/或数字值的 background-position。径向渐变的大小决定了渐变结束形状（圆形或椭圆形）的大小，默认大小为 farthest-corner，这意味着它与距离中心最远的盒子角完全重合。您还可以使用以下关键字：

• closest-corner 将与渐变中心最近的角相交。
• closest-side 将与最接近渐变中心的边相交。
• farthest-side 的行为与 closest-side 相反。

您可以根据需要添加任意数量的颜色停止点，就像使用 linear-gradient 一样。同样，您也可以根据需要添加任意数量的 radial-gradients。

圆锥形渐变

圆锥形渐变在框中有一个中心点，从顶部开始（默认），并以 360 度圆形的方式旋转。

.my-element {
    background: conic-gradient(white, black);
}

conic-gradient() 函数接受位置和角度参数。

默认情况下，角度为 0 度，从顶部中央开始。如果您将角度设置为 45deg，则表示右上角。angle 参数接受任何类型的角度值，例如线性渐变和径向渐变。

默认位置为居中。 与径向渐变和线性渐变一样，定位可以基于关键字，也可以使用数值进行定义。

您可以像其他渐变类型一样，添加任意数量的颜色停止点。使用 CSS 渲染饼图是利用此功能和圆锥形渐变的绝佳用例。

重复和混音

每种类型的渐变也有重复类型。这些角色包括 repeating-linear-gradient()、repeating-radial-gradient() 和 repeating-conic-gradient()。它们与非重复函数类似，并采用相同的参数。区别在于，如果定义的渐变图案可以重复填充整个框，系统会根据这两个尺寸来决定。

如果渐变图案似乎没有重复，则可能是因为您未为某个颜色停止点设置长度。例如，您可以通过设置颜色停止点长度，使用 repeating-linear-gradient 创建条纹背景。

.my-element {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 30px,
    white 30px,
    white 60px
  );
}

您还可以对 background 属性混合使用渐变函数，以及定义任意数量的渐变，就像使用背景图片一样。例如，您可以将多个线性渐变混合在一起，也可以将两个线性渐变与径向渐变混合在一起。

资源

• Conic.css - 一个实用的圆锥形渐变集合
• MDN 梯度指南
• 渐变生成器

检查您的理解情况

测试您对渐变的了解

创建渐变所需的最小颜色数是多少？

1

再试一次！

2

它们可以是相同的颜色，并且显示为纯色，但必须至少有 2 种颜色。

3

再试一次！

4

再试一次！

元素可以使用多个渐变作为背景吗？

正确

background-image 属性支持多个渐变，只需用英文逗号将它们分隔即可。

错误

但它们可以！