渐变

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 渐变指南
• 渐变生成器

检查您的掌握程度

检验您对渐变知识的掌握情况