渐变

使用合集保持井井有条 根据您的偏好保存内容并进行分类。

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，则将是右上角。角度参数接受任何类型的角度值，例如线性和径向渐变。

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

您可以添加任意数量的颜色停止，就像其他渐变类型一样。锥形渐变的一个很好的用例是使用 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 属性上混合渐变函数，以及定义任意数量的渐变，就像您对背景图像所做的那样。例如，您可以将多个线性渐变混合在一起，或者将两个线性渐变与一个径向渐变混合。

插值和颜色空间

每种渐变类型都可以使用 颜色空间 和 in 关键字，以不同的方式在颜色之间进行插值。此选项允许您自定义渐变中两个颜色停止之间的结果。

例如，您可以使用 oklab 颜色空间来大致消除不饱和的中间颜色，并确保更安全、更鲜艳的渐变。

.my-element {
  background: linear-gradient(in oklch, deeppink, yellow);
}

以下演示允许您比较具有和不具有自定义插值的相同渐变。尝试更改颜色空间以查看它们的比较方式，甚至更改颜色以查看插值如何影响渐变。

除了自定义插值外，圆柱形颜色空间（HSL、HWB、LCH 和 OKLCH）还提供 shorter（默认）或 longer 关键字，以指定渐变线是应绕色轮长路径还是两个颜色之间的短路径。

.my-element {
  background: linear-gradient(in oklch longer hue, deeppink, yellow);
}

资源

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

检查您的理解

测试您对渐变的了解