现在，您可以在CSS中轻松定义径向和线性渐变。不再需要在单独的软件中创建图像。它们仍然是浏览器内部生成的图像，因此您需要在背景属性或元素中定义它们，并且您可以灵活地选择方向和色标。
在这里，我们将探索定义线性渐变的语法。有关径向渐变，请参见此post。
1/* Simplest Case */
2.box {
3 background: linear-gradient(black, white);
4}
5
6/* Defining a direction and adding a 3rd color stop */
7.box {
8 background: linear-gradient(to top, #211533, #211533,
9 #3e275f);
10}
11
12/* Direction in degrees instead */
13.box {
14 background: linear-gradient(135deg, #211533, #211533,
15 #3e275f);
16}
17
18/* Control over the position of the color stops */
19.box {
20 background: linear-gradient(135deg, #211533 20%,
21 #211533 40%, #3e275f);
22}
方向
你可以定义一个线性渐变的方向在度或使用这些关键字之一：顶部底部，顶部，右，左，左上，右上，左下，右下。
不支持渐变的浏览器默认颜色
定义一个默认的基色是个好主意，老的浏览器会依赖它：
1.box {
2 background: #211533;
3 background: linear-gradient(to top, #211533, #211533, #3e275f);
4}
浏览器支持
我是否可以从caniuse.com使用css-gradients？数据来支持主流浏览器的css渐变功能。