CSS线性渐变

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

在CSS Level 3中引入了线性渐变，作为CSS图像值和“替换内容”规范的一部分 。 用图像分类此功能听起来很有趣，但是渐变基本上是一种无需使用图像编辑软件即可通过代码本机生成图像的方法。 这样，渐变将应用于背景属性，我们现在将介绍它。

句法

语法非常简单，可以在CSS的background或background-image属性中声明。 它基本上是用简单的英语这样的：

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

官方语法看起来像这样：

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

用法

从最基本的意义上说，这实际上就是：

.gradient {
  background-image:
    linear-gradient(
      red, #f06d06
    );
}

在上面的示例中，我们没有声明<angle> 。 在这种情况下，CSS from top开始假设，其中red是起始颜色，然后过渡到下一个颜色：

在CodePen上查看Chris Coyier （ @chriscoyier ）的Pen BdhbD 。

我们可以用另外两种方式写同样的东西：

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

/* Explicitly declare the angle, in degrees */
background-image: linear-gradient(72deg, red, #f06d06);

改变方向

以使其左到右，则在开始时通过一个附加的参数linear-gradient()开始的字函数to指示的方向：

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

在CodePen上查看Chris Coyier （ @chriscoyier ）的Pen zFoxn 。

这to语法同样适用于拐角处为好。 例如，如果你想要的梯度轴开始在左下角并转到右上角，你可以说to top right ：

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

在CodePen上查看Chris Coyier （ @chriscoyier ）的Pen cruJe 。

如果那个盒子是正方形的，那么那个梯度的角度应该是45deg ，但是由于不是，所以不是。 如果你想确保它是45deg ，你可以声明确切的角度，只下降to从语法：

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

链接多种颜色

您也不仅限于两种颜色。 实际上，您可以根据需要使用任意多个逗号分隔的颜色。 这是四个：

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

在CodePen上查看Chris Coyier （ @chriscoyier ）的Pen niIjA 。

…并且请注意，函数接受所有形式的颜色语法 ，包括命名，十六进制，RGB和HSL。

您还可以声明要从任何特定颜色开始的位置。 这些起点称为color-stops 。 假设您希望黄色占据大部分空间，但红色刚开始时只占一点。 您可以尽早使黄色color-stop 。 在以下示例中， red一直运行到10% ，然后yellow从那里开始运行：

.gradient {
  background-image:
    linear-gradient(
      to right,
      red,
      yellow 10%
    );
}

在CodePen上查看Chris Coyier （ @chriscoyier ）的Pen xnqfj 。

硬色停止

我们倾向于将渐变视为褪色，但是如果您有两个相同的色标，则可以使纯色立即变为另一种纯色。 这对于声明模拟列或条纹的全高背景很有用：

.columns-bg {
  background-image:
    linear-gradient(
      to right, 
      #fffdc2,
      #fffdc2 15%,
      #d7f0a2 15%,
      #d7f0a2 85%,
      #fffdc2 85%
    );
}

在CodePen上查看Chris Coyier （ @chriscoyier ）的Pen csgoD 。

浏览器支持

浏览器对线性渐变的支持是可靠的。 在某个时间点上，所有主流浏览器都使用供应商前缀来支持渐变。 如果您的浏览器支持需要更深入，那么您可以考虑使用Autoprefixer或类似的工具来为您处理供应商前缀，而不必自己进行管理。

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

桌面

铬	火狐浏览器	IE浏览器	边缘	苹果浏览器
10 *	36	10	12	TP

手机/平板电脑

Android Chrome浏览器	Android Firefox	安卓系统	iOS Safari
81	68	4 *	14.0

旧版Internet Explorer过滤器

尽管Internet Explorer（IE）6-9版本不支持CSS渐变语法，但确实提供了一种编程的方式来进行背景渐变

/* "Invalid", but works in 6-8 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);

/* Valid, works in 8-9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";

在决定是否使用此功能时，有一些注意事项：

1. filter通常被认为是性能不佳的做法
2. background-image会覆盖filter ，因此，如果您需要使用该图像进行后备操作，则过滤器会失效。 如果纯色是可以接受的后备（ background-color ），则可以使用滤镜。

即使过滤器仅适用于十六进制值，您仍然可以通过在十六进制值前面添加从00（0％）到FF（100％）的透明度来获得alpha透明度。 例：

rgba(92,47,90,1) == #FF5C2F5A
rgba(92,47,90,0) == #005C2F5A

包起来

ew，对于一个看似简单的概念，这是很多信息！ 线性渐变的核心是颜色如何在一个方向上从一种过渡到另一种。 但是，该语法为我们提供了操纵这些过渡的方式和位置的方式，从而使我们可以创建一些有趣的模式。

其他资源

• CSS图像值和替换的内容模块级别3 ： linear-gradient()表示法的正式规范
• MDN Docs ：有关linear-gradient()表示法的更多文档
• WebGradients.com ：带有CSS片段的大量线性渐变模式集合

翻译自: https://css-tricks.com/snippets/css/css-linear-gradient/