CSS 渐变指南

语法在 CSS 中的 background （简写）或 background-image 属性上声明。它可以用简单的英文表达如下

创建一个 背景图像 ，它是一个 线性渐变 ，它 [以这个方向或这个角度] 移动，并从 [一种颜色] 开始，到 [另一种颜色]结束。

官方语法看起来更像这样

linear-gradient(
  [ <angle> | to <side-or-corner> ]? ,
  <color-stop-list>
)
<side-or-corner> = [to left | to right] || [to top | to bottom]

让我们从最基本的示例开始，一个从上到下过渡的双色 CSS 渐变

.gradient {
  background-image: linear-gradient(#ff8a00, #e52e71);
}

不错吧？请注意，我们在上面的示例中没有声明角度。在这种情况下，CSS 会假设为 to bottom，其中 #ff8a00 是从过渡到下一个颜色 #e52e71 的起始颜色。

我们可以用另外两种方式写出相同的内容

/* Explicitly declare the direction */
background-image: linear-gradient(to bottom, #ff8a00, #e52e71);

/* Explicitly declare the angle, in degrees */
background-image: linear-gradient(180deg, #ff8a00, #e52e71);

要使 CSS 渐变从左到右过渡，我们在 linear-gradient() 函数的开头添加一个额外的参数，从单词 to 开始，表示方向。让我们将属性值分解到不同的行，以便更清楚地了解发生了什么。

.gradient {
  background-image:
    linear-gradient(
      to right,
      #ff8a00, #e52e71
    );
}

太好了，现在颜色从元素的左边缘过渡到右边缘！

此 to 语法也适用于角。例如，如果您希望渐变的轴线从左下角开始到右上角，您可以说 to top right

.gradient {
  background-image:
    linear-gradient(
      to top right,
      #ff8a00, #e52e71
    );
}

如果该方框是一个完美的正方形，那么渐变的角度将为 45deg，但由于它不是，所以它不是。如果您希望确保它为 45deg，您可以声明确切的角度，只从语法中删除 to 

.gradient {
  background-image:
    linear-gradient(
      45deg, 
      #ff8a00, #e52e71
    );
}

我们并不局限于两种颜色！实际上，我们可以使用任意数量用逗号分隔的颜色。以下是四种颜色

.gradient {
  background-image:
    linear-gradient(
      to right, 
      red, 
      #f06d06, 
      rgb(255, 255, 0), 
      green
    );
}

在 CSS 中， radial-gradient() 标记用于 background 或 background-image 属性。当我们回忆到渐变基本上是创建图像的 CSS 代码时，这一点就完全说得通了，否则我们将在图像编辑软件中创建这些图像并将其放在 background 属性上。

官方语法如下

radial-gradient(
  [ <ending-shape> || <size> ]? [ at <position> ]? ,
  <color-stop-list>
);

将它翻译成简单的英文可能会有所帮助

嘿，元素！以 某种形状 在 某个大小 处绘制一个 径向渐变 ，它位于 这些位置。哦，还要确保它从 这种颜色 开始，到 这种颜色 结束。

radial-gradient 标记接受以下值

• shape: 确定从一种颜色过渡到另一种颜色时，渐变向外过渡时所遵循的形状。由于我们讨论的是径向渐变，因此形状仅限于圆形。我们可以省略此值，该标记将测量元素的边长以确定哪个值更匹配当前情况。例如，一个完美的正方形元素非常适合 circle ，而任何矩形元素都适合 ellipse。
  • circle
  • ellipse
• size: 通过采用 shape 值并指示渐变应基于形状的中心结束的位置来影响渐变的结束形状。这可以通过名称或确切的长度度量来表达。
  • closest-side: 渐变将在最靠近形状中心的边上结束。如果两条边满足此条件，那么它将被均匀分布。
  • farthest-side （默认）：与 closest-side 相反，渐变将在最远离形状中心的边上结束。
  • closest-corner: 渐变将在最靠近形状中心的角上结束。
  • farthest-corner: 与 closest-corner 相反，渐变将在最远离形状中心的角上结束。
  • radius: 我们可以指定一个数值作为圆的半径。这必须以正像素或相对单位表示。抱歉，不允许使用负单位或百分比，因为负圆将是真空，而百分比可以相对于周围的任意数量的值。
    • or percentage: 可以提供第二个数值来声明椭圆的显式大小，但不能声明圆的大小。同样，不允许使用负值，但百分比是允许的，因为大小相对于渐变方框而不是元素。
• position: 这与 background-position 的工作方式非常相似。这意味着 top, right, left 和 center 都可以在此处使用，以及提供两个命名值的组合（例如 top center）。我们还可以使用数值（包括百分比）指定确切的位置，所有这些位置都相对于元素的边界框。默认值为 center center。
• color-stop: 这些是定义渐变的颜色值。任何颜色值都可以在此处使用，包括十六进制、命名、RGB 和 HSL。

以下是它在最基本状态下的样子。请注意，我们没有声明 shape, size, position 或 color-stop 值，它们都默认为将渐变放置在元素的中心位置并以声明的颜色值之间均匀过渡的值。

.gradient {
  background-image:
    radial-gradient(
      #ff8a00,
      #e52e71
    );
}

想看更多径向渐变的例子吗？Patrick Brosset 在他的径向渐变深度解析文章中提供了许多例子。

看到上面的例子中，渐变是如何假设形状为ellipse的吗？这是因为元素本身不是一个完美的正方形。在这种情况下，它将假设为一个circle。非常聪明！以下是如果我们显式地声明circle作为shape的值会发生什么

.gradient {
  background-image:
    radial-gradient(
      circle,
      #ff8a00,
      #e52e71
    );
}

注意演示中的渐变是圆形的，并且沿着最远边缘一直淡化到结束颜色。我们可以显式地声明position值以确保淡化在“最近边”结束，而不是像这样

.gradient {
  background-image:
    radial-gradient(
      circle closest-side,
      #ff8a00,
      #e52e71
    );
}

这里可能的值是：closest-corner、closest-side、farthest-corner 和 farthest-side。你可以这样想：“我希望这个径向渐变从中心点淡化到[任何一边]，” 以及其他所有地方都填充以适应它。

径向渐变也不一定从默认的中心开始。它可以通过使用 at 作为第一个参数的一部分来指定一个特定的点，例如

.gradient {
  background-image:
    radial-gradient(
      circle at top right,
      #ff8a00,
      #e52e71
    );
}

圆锥形渐变语法用简单的英语更容易理解

创建一个位于[某个点]的conic-gradient，它从[某个角度]开始为[一种颜色]，并以[某个角度]结束为[另一种颜色]。

这是官方语法

conic-gradient(
  [ from <angle> ]? [ at <position> ]?,
  <angular-color-stop-list>
)

在最基本的层面上，它看起来像这样

.gradient {
  background-image:
    conic-gradient(
      #ff8a00, #e52e71
    );
}

… 其中假设渐变的位置从元素的正中心（50% 50%）开始，并在两种颜色值之间均匀分布。

我们可以用其他几种方法来写它，这些方法都是有效的

.gradient {
  /* Original example */
  background-image: conic-gradient(#ff8a00, #e52e71);
  /* Explicitly state the location center point */
  background-image: conic-gradient(at 50% 50%, #ff8a00, #e52e71);
  /* Explicitly state the angle of the start color */
  background-image: conic-gradient(from 0deg, #ff8a00, #e52e71);
  /* Explicitly state the angle of the start color and center point location */
  background-image: conic-gradient(from 0deg at center, #ff8a00, #e52e71);
  /* Explicitly state the angles of both colors as percentages instead of degrees */
  background-image: conic-gradient(#ff8a00 0%, #ff8a00, #e52e71);
  /* Explicitly state the angle of the starting color in degrees and the ending color by a full turn of the circle */
  background-image: conic-gradient(#ff8a00 0deg, #e52e71 1turn);
}

如果我们没有为颜色指定角度，那么假设渐变在颜色之间均匀分布，从0deg开始，到360deg结束。这会在0deg和360deg处创建一个“硬停止”，其中颜色在0deg和360deg处直接接合。如果我们引入第三个值，那么这将创建一个更平滑的渐变，并且我们开始得到那种酷炫的锥形透视感。

.gradient {
  background-image:
    conic-gradient(
      #ff8a00,
      #e52e71,
      #ff8a00
    );
}

我们可以用圆锥形渐变来玩一些有趣的东西。例如，我们可以用它来创建类似于在颜色选择器或臭名昭著的 Mac 旋转海滩球指示器中看到的图案

.conic-gradient {
  background-image:
    conic-gradient(
      red,
      yellow,
      lime,
      aqua,
      blue,
      magenta,
      red
    );
}

或者，让我们通过在三个颜色值之间添加硬停止来尝试一个简单的饼图

.gradient {
  background-image:
    conic-gradient(
      lime 40%,
      yellow 0 70%,
      red 0
    );
}

有三种类型的重复渐变，目前所有三种类型都得到官方规范的支持，其中一种在当前工作草案中。每种符号的语法与其相关渐变类型相同。例如，repeating-linear-gradient()遵循与linear-gradient()相同的语法。

这是一个重复的线性渐变，每 10 像素在 45 度角上交替使用两种颜色。

.gradient {
  background-image:
    repeating-linear-gradient(
      45deg,
      #ff8a00,
      #ff8a00 10px,
      #e52e71 10px,
      #e52e71 20px
    );
}

我们可以做同样的事情，但使用径向渐变。区别？除了符号本身之外，我们还在定义形状和起点。

.gradient {
  background-image:
    repeating-radial-gradient(
      circle at 0 0,
      #ff8a00,
      #ff8a00 10px,
      #e52e71 10px,
      #e52e71 20px
    );
}

圆锥形渐变没什么不同！同样，径向渐变和圆锥形渐变之间的主要区别在于，圆锥形渐变的颜色在元素周围过渡，而径向渐变的颜色从渐变源的中心过渡。

.gradient {
  background-image:
    repeating-conic-gradient(
      from 0deg, 
      #ff8a00 0deg 30deg, 
      #e52e71 30deg 60deg
  );
}

这专门针对线性渐变和径向重复渐变。

我们已经了解了如何使用渐变在重复渐变中创建有趣的图案。但是，我们可以创建许多其他图案！就像棋盘

我们也可以制作重复的斜纹图案

Chris 有一个片段 可以制作一个方格纸图案

这些图案在网上都有很好的记录，但是查看 Lea Verou 的 CSS 渐变图案库，了解一些真正令人惊叹的示例。

我们可以使用渐变来创建边框！

我们甚至可以使用图案技巧来获得有趣的边框效果

或者，我们可以使用硬性停止来实现重叠内容效果

我们可以使用 background-position 来使其看起来像渐变中颜色的过渡正在移动。

但是，就像任何动画一样，请注意可访问性，尤其是那些对运动敏感的人。查看可访问性部分以了解更多信息。

查看 Marty 的这个演示！这是一个非常巧妙地使用径向渐变来模拟基于鼠标光标位置的阳光。