CSS中的线性渐变

您现在可以轻松地在 CSS 中定义径向和线性渐变。 不再需要在单独的软件中创建图像。 它们仍然是浏览器内部生成的图像，因此您需要在背景属性或元素中定义它们，并且您可以在方向和颜色停止方面获得足够的灵活性。

在这里，我们将探索定义线性渐变的语法。 有关径向渐变，请参阅 这篇文章 。

/* Simplest Case */
.box {
  background: linear-gradient(black, white);
}

/* Defining a direction and adding a 3rd color stop */
.box {
 background: linear-gradient(to top, #211533, #211533,
             #3e275f);
}

/* Direction in degrees instead */
.box {
 background: linear-gradient(135deg, #211533, #211533,
             #3e275f);
}

/* Control over the position of the color stops */
.box {
  background: linear-gradient(135deg, #211533 20%,
              #211533 40%, #3e275f);
}

方向

您可以以度为单位或使用以下关键字之一定义线性渐变的方向：top bottom、to top、to right、to left、to top left、to top right、to bottom left、to bottom right。

不支持渐变的浏览器的默认颜色

定义一个旧浏览器将依赖的默认基色是个好主意：

.box {
 background: #211533;
 background: linear-gradient(to top, #211533, #211533, #3e275f);
}

浏览器支持

我可以使用 css-gradients 吗？ 来自 caniuse.com 的主流浏览器支持 css-gradients 功能的数据。