使用 CSS 渐变

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

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

我们将首先介绍线性渐变，然后使用线性渐变作为示例介绍所有渐变类型中支持的功能，然后转向径向、圆锥形和重复渐变

使用线性渐变

线性渐变创建一条颜色带，这些颜色沿直线渐变。

基本的线性渐变

要创建最基本的渐变类型，您只需指定两种颜色即可。这些称为颜色停止点。您必须至少有两个，但可以根据需要添加任意多个。

css
.simple-linear {
  background: linear-gradient(blue, pink);
}

更改方向

默认情况下，线性渐变从上到下运行。您可以通过指定方向来更改其旋转。

css
.horizontal-gradient {
  background: linear-gradient(to right, blue, pink);
}

对角线渐变

您甚至可以使渐变沿对角线运行，从一个角到另一个角。

css
.diagonal-gradient {
  background: linear-gradient(to bottom right, blue, pink);
}

使用角度

如果您希望更好地控制其方向，可以为渐变指定一个特定的角度。

css
.angled-gradient {
  background: linear-gradient(70deg, blue, pink);
}

使用角度时，0deg 创建一个从下到上的垂直渐变，90deg 创建一个从左到右的水平渐变，依此类推，顺时针方向。负角度沿逆时针方向运行。

Four boxes listing angle and showing associated gradient from red to white. 0deg starts at the bottom and goes up. 90deg starts at left and goes right. 180deg starts at the top and goes down. -90deg starts at right and goes left.

声明颜色和创建效果

所有 CSS 渐变类型都是一系列与位置相关的颜色。CSS 渐变产生的颜色可以随位置连续变化，从而产生平滑的颜色过渡。也可以创建纯色带和两种颜色之间的硬过渡。以下对所有渐变函数均有效

使用两种以上颜色

您不必将自己限制在两种颜色上——您可以使用任意多种！默认情况下，颜色在渐变中均匀分布。

css
.auto-spaced-linear-gradient {
  background: linear-gradient(red, yellow, blue, orange);
}

定位颜色停止点

您不必将颜色停止点保留在其默认位置。要微调其位置，您可以为每个停止点指定零个、一个或两个百分比或（对于径向和线性渐变）绝对长度值。如果将位置指定为百分比，则0%表示起点，而100%表示终点；但是，如果需要获得所需的效果，可以使用超出该范围的值。如果您未指定位置，则该特定颜色停止点的位置将自动为您计算，第一个颜色停止点位于0%，最后一个颜色停止点位于100%，任何其他颜色停止点位于其相邻颜色停止点之间的一半位置。

css
.multicolor-linear {
  background: linear-gradient(to left, lime 28px, red 77%, cyan);
}

创建硬线

要创建两种颜色之间的硬线，而不是渐变过渡，可以将相邻的颜色停止点设置为相同的位置。在此示例中，颜色在50%标记处共享一个颜色停止点，即渐变的一半处

css
.striped {
  background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
}

渐变提示

默认情况下，渐变从一种颜色到另一种颜色均匀过渡。您可以包含颜色提示以将过渡中点的值移动到渐变中的某个点。在此示例中，我们已将过渡中点从50%标记处移动到10%标记处。

css
.color-hint {
  background: linear-gradient(blue, 10%, pink);
}
.simple-linear {
  background: linear-gradient(blue, pink);
}

创建色带和条纹

要在渐变中包含一个实心的、无过渡的色块区域，请为该颜色停止点包含两个位置。颜色停止点可以有两个位置，这相当于在不同位置使用相同颜色的两个连续颜色停止点。颜色将在第一个颜色停止点达到完全饱和，并在第二个颜色停止点保持该饱和度，并通过相邻颜色停止点的第一个位置过渡到相邻颜色停止点的颜色。

css
.multiposition-stops {
  background: linear-gradient(
    to left,
    lime 20%,
    red 30%,
    red 45%,
    cyan 55%,
    cyan 70%,
    yellow 80%
  );
  background: linear-gradient(
    to left,
    lime 20%,
    red 30% 45%,
    cyan 55% 70%,
    yellow 80%
  );
}
.multiposition-stop2 {
  background: linear-gradient(
    to left,
    lime 25%,
    red 25%,
    red 50%,
    cyan 50%,
    cyan 75%,
    yellow 75%
  );
  background: linear-gradient(
    to left,
    lime 25%,
    red 25% 50%,
    cyan 50% 75%,
    yellow 75%
  );
}

在上面第一个示例中，青柠色从隐含的 0% 标记延伸到 20% 标记，在接下来的 10% 渐变宽度内从青柠色过渡到红色，在 30% 标记处达到纯红色，并在渐变的 45% 处保持纯红色，然后逐渐淡化为青色，在渐变的 15% 处为纯青色，依此类推。

在第二个示例中，每个颜色的第二个颜色停止点与相邻颜色的第一个颜色停止点位于相同位置，从而产生条纹效果。

在这两个示例中，渐变都写了两次：第一个是 CSS Images Level 3 方法，对每个停止点重复颜色；第二个示例是 CSS Images Level 4 多颜色停止点方法，在 linear-color-stop 声明中包含两个颜色停止点长度。

控制渐变的进度

默认情况下，渐变在两个相邻颜色停止点的颜色之间均匀过渡，这两个颜色停止点的中点是中点颜色值。可以通过包含颜色提示位置来控制插值或两个颜色停止点之间的进度。在此示例中，颜色在渐变的 20% 处达到青柠色和青色之间的中点，而不是在 50% 处。第二个示例不包含提示，以突出显示颜色提示可以产生的差异

css
.colorhint-gradient {
  background: linear-gradient(to top, lime, 20%, cyan);
}
.regular-progression {
  background: linear-gradient(to top, lime, cyan);
}

叠加渐变

渐变支持透明度，因此您可以堆叠多个背景以实现一些非常花哨的效果。背景从上到下堆叠，第一个指定的背景位于顶部。

css
.layered-image {
  background: linear-gradient(to right, transparent, mistyrose),
    url("critters.png");
}

堆叠的渐变

您甚至可以将渐变与其他渐变堆叠在一起。只要顶部的渐变不是完全不透明的，下面的渐变仍然可见。

css
.stacked-linear {
  background: linear-gradient(
      217deg,
      rgb(255 0 0 / 80%),
      rgb(255 0 0 / 0%) 70.71%
    ),
    linear-gradient(127deg, rgb(0 255 0 / 80%), rgb(0 255 0 / 0%) 70.71%),
    linear-gradient(336deg, rgb(0 0 255 / 80%), rgb(0 0 255 / 0%) 70.71%);
}

混合渐变

除了透明度之外，堆叠多个半透明渐变以及在光栅背景图像上叠加渐变之外，渐变还可以与其他 CSS 效果一起使用。在此示例中，四个<div>元素具有相同的两个完全不透明的渐变作为背景图像。我们将不同的background-blend-mode CSS 属性值应用于后三个，这些值混合两个背景图像，从而产生不同的效果。

css
div {
  background: linear-gradient(to top, red, blue),
    linear-gradient(to right, #5500ff, #00ff55);
}

.screen {
  background-blend-mode: screen;
}

.overlay {
  background-blend-mode: overlay;
}

.difference {
  background-blend-mode: difference;
}

使用径向渐变

径向渐变类似于线性渐变，只是它们从中心点向外辐射。您可以指定该中心点的位置。您还可以使它们呈圆形或椭圆形。

基本的径向渐变

与线性渐变一样，创建径向渐变只需要两种颜色。默认情况下，渐变的中心位于 50% 50% 标记处，渐变为椭圆形，与其盒子的纵横比匹配

css
.simple-radial {
  background: radial-gradient(red, blue);
}

定位径向颜色停止点

同样，与线性渐变一样，您可以使用百分比或绝对长度来定位每个径向颜色停止点。

css
.radial-gradient {
  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
}

定位渐变的中心

您可以使用关键词、百分比或绝对长度来定位渐变的中心，如果只存在一个长度和百分比值，则重复，否则按从左到右和从上到下的位置顺序。

css
.radial-gradient {
  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
}

调整径向渐变的大小

与线性渐变不同，您可以指定径向渐变的大小。可能的值包括 closest-corner、closest-side、farthest-corner 和 farthest-side，其中 farthest-corner 为默认值。圆圈也可以用长度来调整大小，椭圆可以用长度或百分比来调整大小。

示例：椭圆的 closest-side

此示例使用 closest-side 尺寸值，这意味着尺寸由从起点（中心）到封闭盒子的最近一侧的距离设置。

css
.radial-ellipse-side {
  background: radial-gradient(
    ellipse closest-side,
    red,
    yellow 10%,
    #1e90ff 50%,
    beige
  );
}

示例：椭圆的 farthest-corner

此示例与前一个示例类似，只是其大小指定为 farthest-corner，它通过从起点到封闭盒子的最远角的距离来设置渐变的大小。

css
.radial-ellipse-far {
  background: radial-gradient(
    ellipse farthest-corner at 90% 90%,
    red,
    yellow 10%,
    #1e90ff 50%,
    beige
  );
}

示例：圆形的 closest-side

此示例使用 closest-side，这使得圆的半径等于渐变中心到最近一侧的距离。在这种情况下，半径是中心到底边的距离，因为渐变放置在左侧的 25% 和底部的 25% 处，并且 div 元素的高度小于宽度。

css
.radial-circle-close {
  background: radial-gradient(
    circle closest-side at 25% 75%,
    red,
    yellow 10%,
    #1e90ff 50%,
    beige
  );
}

示例：椭圆的长度或百分比

仅对于椭圆，您可以使用长度或百分比来调整椭圆的大小。第一个值表示水平半径，第二个值表示垂直半径，当您使用百分比时，它对应于该维度中盒子的尺寸。在下面的示例中，我使用了水平半径的百分比。

css
.radial-ellipse-size {
  background: radial-gradient(
    ellipse 50% 50px,
    red,
    yellow 10%,
    #1e90ff 50%,
    beige
  );
}

示例：圆形的长度

对于圆形，尺寸可以指定为<length>，表示圆形的尺寸。

css
.radial-circle-size {
  background: radial-gradient(circle 50px, red, yellow 10%, #1e90ff 50%, beige);
}

堆叠的径向渐变

就像线性渐变一样，您也可以堆叠径向渐变。第一个指定的渐变位于顶部，最后一个位于底部。

css
.stacked-radial {
  background:
    radial-gradient(
      circle at 50% 0,
      rgb(255 0 0 / 50%),
      rgb(255 0 0 / 0%) 70.71%
    ),
    radial-gradient(
      circle at 6.7% 75%,
      rgb(0 0 255 / 50%),
      rgb(0 0 255 / 0%) 70.71%
    ),
    radial-gradient(
        circle at 93.3% 75%,
        rgb(0 255 0 / 50%),
        rgb(0 255 0 / 0%) 70.71%
      )
      beige;
  border-radius: 50%;
}

使用圆锥渐变

conic-gradient() CSS 函数创建一个图像，该图像由一个渐变组成，该渐变的颜色过渡围绕中心点旋转（而不是从中心辐射）。示例圆锥渐变包括饼图和色轮，但它们也可以用于创建棋盘和其他有趣的效果。

圆锥渐变语法类似于径向渐变语法，但颜色停止点位于渐变弧线（圆的圆周）上，而不是位于从渐变中心出现的渐变线上，并且颜色停止点是百分比或度数：绝对长度无效。

在径向渐变中，颜色从椭圆的中心向外、向所有方向过渡。使用圆锥渐变时，颜色会像围绕圆的中心旋转一样过渡，从顶部开始并顺时针方向旋转。与径向渐变类似，您可以定位渐变的中心。与线性渐变类似，您可以更改渐变角度。

基本的圆锥渐变

与线性渐变和径向渐变一样，创建圆锥渐变只需要两种颜色。默认情况下，渐变的中心位于 50% 50% 标记处，渐变的起点朝上

css
.simple-conic {
  background: conic-gradient(red, blue);
}

定位圆锥中心

与径向渐变类似，您可以使用关键词、百分比或绝对长度来定位圆锥渐变的中心，并使用关键词“at”。

css
.conic-gradient {
  background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
}

更改角度

默认情况下，您指定的不同颜色停止点在圆周上等距分布。您可以使用“from”关键字在开头后跟一个角度或长度来定位圆锥渐变的起始角度，并且可以通过在颜色停止点之后包含一个角度或长度来为颜色停止点指定不同的位置。

css
.conic-gradient {
  background: conic-gradient(from 45deg, red, orange 50%, yellow 85%, green);
}

使用重复渐变

linear-gradient()、radial-gradient() 和 conic-gradient() 函数不支持自动重复的颜色停止点。但是，repeating-linear-gradient()、repeating-radial-gradient() 和 repeating-conic-gradient() 函数可用于提供此功能。

重复的渐变线或弧的大小是第一个颜色停止点值和最后一个颜色停止点长度值之间的长度。如果第一个颜色停止点只有颜色而没有颜色停止点长度，则该值默认为 0。如果最后一个颜色停止点只有颜色而没有颜色停止点长度，则该值默认为 100%。如果两者都没有声明，则渐变线为 100%，这意味着线性渐变和圆锥渐变不会重复，并且径向渐变仅在渐变的半径小于渐变中心到最远角之间的长度时才会重复。如果声明了第一个颜色停止点，并且该值大于 0，则渐变将重复，因为线或弧的大小是第一个颜色停止点和最后一个颜色停止点之间的差值小于 100% 或 360 度。

重复线性渐变

此示例使用repeating-linear-gradient() 创建一个沿直线重复进度的渐变。随着渐变的重复，颜色会循环重复。在这种情况下，渐变线长 10px。

css
.repeating-linear {
  background: repeating-linear-gradient(
    -45deg,
    red,
    red 5px,
    blue 5px,
    blue 10px
  );
}

多个重复线性渐变

与常规线性渐变和径向渐变类似，您可以包含多个渐变，一个叠加在另一个之上。只有当渐变部分透明，允许后续渐变显示在透明区域中，或者当您为每个渐变图像包含不同的背景大小（可选地具有不同的背景位置属性值）时，这才有意义。我们正在使用透明度。

在这种情况下，渐变线分别长 300px、230px 和 300px。

css
.multi-repeating-linear {
  background: repeating-linear-gradient(
      190deg,
      rgb(255 0 0 / 50%) 40px,
      rgb(255 153 0 / 50%) 80px,
      rgb(255 255 0 / 50%) 120px,
      rgb(0 255 0 / 50%) 160px,
      rgb(0 0 255 / 50%) 200px,
      rgb(75 0 130 / 50%) 240px,
      rgb(238 130 238 / 50%) 280px,
      rgb(255 0 0 / 50%) 300px
    ),
    repeating-linear-gradient(
      -190deg,
      rgb(255 0 0 / 50%) 30px,
      rgb(255 153 0 / 50%) 60px,
      rgb(255 255 0 / 50%) 90px,
      rgb(0 255 0 / 50%) 120px,
      rgb(0 0 255 / 50%) 150px,
      rgb(75 0 130 / 50%) 180px,
      rgb(238 130 238 / 50%) 210px,
      rgb(255 0 0 / 50%) 230px
    ),
    repeating-linear-gradient(
      23deg,
      red 50px,
      orange 100px,
      yellow 150px,
      green 200px,
      blue 250px,
      indigo 300px,
      violet 350px,
      red 370px
    );
}

格子渐变

要创建格子图案，我们包含几个带有透明度的重叠渐变。在第一个背景声明中，我们分别列出了每个颜色停止点。第二个背景属性声明使用多位置颜色停止点语法

css
.plaid-gradient {
  background: repeating-linear-gradient(
      90deg,
      transparent,
      transparent 50px,
      rgb(255 127 0 / 25%) 50px,
      rgb(255 127 0 / 25%) 56px,
      transparent 56px,
      transparent 63px,
      rgb(255 127 0 / 25%) 63px,
      rgb(255 127 0 / 25%) 69px,
      transparent 69px,
      transparent 116px,
      rgb(255 206 0 / 25%) 116px,
      rgb(255 206 0 / 25%) 166px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 50px,
      rgb(255 127 0 / 25%) 50px,
      rgb(255 127 0 / 25%) 56px,
      transparent 56px,
      transparent 63px,
      rgb(255 127 0 / 25%) 63px,
      rgb(255 127 0 / 25%) 69px,
      transparent 69px,
      transparent 116px,
      rgb(255 206 0 / 25%) 116px,
      rgb(255 206 0 / 25%) 166px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 5px,
      rgb(143 77 63 / 25%) 5px,
      rgb(143 77 63 / 25%) 10px
    ),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 5px,
      rgb(143 77 63 / 25%) 5px,
      rgb(143 77 63 / 25%) 10px
    );

  background: repeating-linear-gradient(
      90deg,
      transparent 0 50px,
      rgb(255 127 0 / 25%) 50px 56px,
      transparent 56px 63px,
      rgb(255 127 0 / 25%) 63px 69px,
      transparent 69px 116px,
      rgb(255 206 0 / 25%) 116px 166px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 50px,
      rgb(255 127 0 / 25%) 50px 56px,
      transparent 56px 63px,
      rgb(255 127 0 / 25%) 63px 69px,
      transparent 69px 116px,
      rgb(255 206 0 / 25%) 116px 166px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0 5px,
      rgb(143 77 63 / 25%) 5px 10px
    ),
    repeating-linear-gradient(
      45deg,
      transparent 0 5px,
      rgb(143 77 63 / 25%) 5px 10px
    );
}

重复径向渐变

此示例使用repeating-radial-gradient() 创建一个从中心点重复辐射的渐变。随着渐变的重复，颜色会循环重复。

css
.repeating-radial {
  background: repeating-radial-gradient(
    black,
    black 5px,
    white 5px,
    white 10px
  );
}

多个重复径向渐变

css
.multi-target {
  background:
    repeating-radial-gradient(
        ellipse at 80% 50%,
        rgb(0 0 0 / 50%),
        rgb(0 0 0 / 50%) 15px,
        rgb(255 255 255 / 50%) 15px,
        rgb(255 255 255 / 50%) 30px
      )
      top left no-repeat,
    repeating-radial-gradient(
        ellipse at 20% 50%,
        rgb(0 0 0 / 50%),
        rgb(0 0 0 / 50%) 10px,
        rgb(255 255 255 / 50%) 10px,
        rgb(255 255 255 / 50%) 20px
      )
      top left no-repeat yellow;
  background-size:
    200px 200px,
    150px 150px;
}

重复圆锥渐变

此示例使用repeating-conic-gradient() 创建一个围绕中心点重复旋转的渐变。在这种情况下，声明的颜色停止点重复四次。

css
.repeating-conic {
  background: repeating-conic-gradient(
    #66ccff 0% 8.25%,
    #6633ff 8.25% 16.5%,
    #ff3399 16.5% 25%
  );
}

多个重复圆锥渐变

就像线性渐变和径向重复渐变一样，您可以在彼此之上堆叠多个圆锥渐变，通过使用不同的 at <position> 值（以便圆锥渐变的中心不会重叠）和不同的 from <angle> 值（以便重复效果不会对齐）创建有趣的效果。此示例重叠三个半透明的重复径向渐变，每个渐变将其颜色方案重复四次。为了使重叠的渐变可见，您需要确保堆栈顶部的渐变的颜色部分透明，或者使用background-blend-mode CSS 属性。

css
.multi-repeating-conic {
  background: repeating-conic-gradient(
      from 0deg at 80% 50%,
      #5691f580 0% 8.25%,
      #b338ff80 8.25% 16.5%,
      #f8305880 16.5% 25%
    ),
    repeating-conic-gradient(
      from 15deg at 50% 50%,
      #e856f580 0% 8.25%,
      #ff384c80 8.25% 16.5%,
      #e7f83080 16.5% 25%
    ),
    repeating-conic-gradient(
      from 0deg at 20% 50%,
      #f58356ff 0% 8.25%,
      #caff38ff 8.25% 16.5%,
      #30f88aff 16.5% 25%
    );
}

另请参阅