【翻译】CSS Gradient 的完整指南

翻译 A Complete Guide to CSS Gradients

就像你可以使用 CSS 中的 background-color 属性来声明一个纯色的背景一样，你不仅可以使用 background-image 属性来声明图像文件作为背景，也可以使用渐变。使用 CSS 渐变比使用实际的图像（渐变）文件更有利于控制和性能。

渐变通常是从一种颜色渐渐变成另一种颜色，但是 CSS 允许你控制渐变的每个方面，从 direction（方向） 和 shape （形状）到 color （颜色）以及如何从一种颜色过渡到另一种颜色。事实上，有三种类型的渐变：linear（线性）、radial（径向） 和 conic （锥形）。下面是每一种的基本语法：
点击查看【codepen】

线性渐变

也许我们在网页设计中看到的最常见的渐变类型是 linear-gradient()。 之所以称为“线性”，是因为颜色从左到右、从上到下或以你选择的任何角度在一个方向上流动。

语法

语法是在 CSS 中的 background（简写）或 background-image 属性上声明的。 它用简单的英语读起来是这样的：

Create a background image that is a linear gradient that moves [in this direction or at this angle] and starts with [one color] and ends with [another color].

官方语法是这样的：

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

用法

让我们从最基本的例子开始，一个从上到下的双色渐变：

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

点击查看【codepen】

不错，对吧？ 请注意，我们没有在上面的示例中声明角度。 在这种情况下，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);

改变方向

为了使渐变从左到右，我们在 linear-gradient() 函数的开头传递了一个额外的参数，以表示方向的 to 开头。 让我们将属性值分成独立的行，以便更容易查看发生了什么。

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

点击查看【codepen】

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

这种 to 语法也适用于角部。例如，如果你想让渐变的轴线从左下角开始，一直到右上角，你可以说 to top right。

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

点击查看【codepen】

如果那个盒子是一个完美的正方形，渐变的角度应该是 45 度，但既然不是，那就不是 45 度。 如果你想确保它是 45 度，你可以声明确切的角度，只需要语法中删除 to：

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

多种颜色

我们并不局限于只有两种颜色！事实上，我们可以有任意多的逗号分隔的颜色。这里有四种：

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

点击查看【codepen】

浏览器支持

此浏览器支持数据来自 Caniuse，其中包含更多详细信息。 数字表示浏览器支持该版本及更高版本的功能。

径向渐变

径向渐变与线性渐变的不同之处在于，它从一个点开始，向外发散。渐变经常被用来模拟光源，我们知道光源并不总是直的。这使得径向渐变中颜色之间的过渡显得更加自然。

语法

radial-gradient() 用于 CSS 中的 background 或 background-image 属性。 当我们回忆起渐变基本上是创建图像的 CSS 时，这完全有道理，否则我们将在图像编辑软件中制作图像并放置在背景属性上。

官方语法是这样的：

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

将其翻译成基本英语可能会有所帮助：

Hey, element! Paint a radial gradient in some shape at some size that is located in these positions. Oh, and make sure it starts with this color and stops at this color.

值

径向渐变接受以下值：

shape
确定向外过渡时的渐变形状，从一种颜色到另一种颜色。由于我们谈论的是径向渐变，因此形状本质上仅限于圆形。我们可以省略这个值，符号将测量元素的边长，以确定是否有一个值更适合这种情况。例如，一个完美的正方形元素非常适合 circle，而任何矩形都适合 ellipse。

• circle
• ellipse

size
通过获取 shape 值并根据形状的中心指示渐变应在何处结束，从而影响渐变的结束形状。这可以通过名称或长度的精确度量来表示。

• closest-side

渐变将在最靠近形状中心的一侧结束。如果两侧符合此标准，那么它将是均匀分布的。

• farthest-side（默认）

与 closest-side 相反，渐变将在距离形状中心最远的一侧结束。

• closest-corner

渐变将在最接近形状中心的角落结束。

• farthest-corner

与 closest-corner 相反，渐变在距离形状中心最远的角结束。

• radius

我们可以指定一个数值，作为圆的半径。这必须以正像素或相对单位表示。对不起，不允许使用负的单位或百分比，因为负的圆将是真空的，而百分比可以是相对于周围任何数量的值。

• 或 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
    );
}

点击查看【codepen】

改变形状

看看上面的例子中渐变是如何假设 shape 是 ellipse 的？ 那是因为元素本身不是一个完美的正方形。 在那种情况下，它会假设一个 circle 。 相当聪明！ 如果我们明确地将 circle 声明为 shape 值，将会发生以下情况：

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

点击查看【codepen】

改变位置

请注意，演示中的渐变是圆形的，并且沿着最远的边缘一直渐变到结束颜色。 我们可以明确声明位置值以确保淡入淡出在形状的“最近侧”结束，如下所示：

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

点击查看【codepen】

可能的值有：closest-corner，closest-side，farthest-corner，和 farthest-side。 你可以把它想象成：“我希望这个径向渐变从中心点到[哪一边]”，然后在其他地方填充以适应这一点。

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

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

点击查看【codepen】

浏览器支持

此浏览器支持数据来自 Caniuse，其中包含更多详细信息。 数字表示浏览器支持该版本及更高版本的功能。

圆锥渐变

圆锥渐变类似于径向渐变。 两者都是圆形，并使用元素的中心作为 color stop 的源点。 然而，在径向渐变的 color stop 出现在圆心，圆锥渐变将它们放置在圆周围。

它们被称为“圆锥形”，因为它们从上面看起来像圆锥体的形状。 好吧，至少当提供了一个明显的角度并且颜色值之间的对比度大到足以区分。

语法

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

Make a conic-gradient that is located at [some point] that starts with [one color] at some angle and ends with [another color] at [some angle]

这是官方语法：

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

用法

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

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

点击查看【codepen】

…假设渐变的位置从元素的正中心 (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);
}

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

点击查看【codepen】

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

浏览器支持

此浏览器支持数据来自 Caniuse，其中包含更多详细信息。 数字表示浏览器支持该版本及更高版本的功能。

重复渐变

语法

用法

浏览器支持

此浏览器支持数据来自 Caniuse，其中包含更多详细信息。 数字表示浏览器支持该版本及更高版本的功能。

技巧!

模式

边界渐变

动画渐变

更多的技巧

无障碍设施

规格

• CSS Images Module Level 3 (Latest)
• CSS Images Module Level 3 (Editor’s draft)