线性渐变

 1 /*标准写法*/
 2         .item:nth-child(1) .linear-gradient {
 3             background-image: linear-gradient(yellow, green);
 4         }
 5         
 6         /*多个颜色渐变*/
 7         .item:nth-child(2) .linear-gradient {
 8             background-image: linear-gradient(yellow, green, red, blue);
 9         }
10         
11         /*用角度确定方向*/
12         .item:nth-child(3) .linear-gradient {
13             background-image: linear-gradient(0, yellow, green);
14         }
15 
16         /*用角度确定方向 正上方为0度 顺时针旋转*/
17         .item:nth-child(4) .linear-gradient {
18             background-image: linear-gradient(90deg, yellow, green);
19         }
20         
21         /*用角度确定方向 180deg 正上方为0度 顺时针旋转*/
22         .item:nth-child(5) .linear-gradient {
23             background-image: linear-gradient(180deg, yellow, green);
24         }
25 
26         /*用关键字来确定方向*/
27         .item:nth-child(6) .linear-gradient {
28             background-image: linear-gradient(to top, yellow, green);
29         }
30 
31         /*用关键字来确定方向*/
32         .item:nth-child(7) .linear-gradient {
33             background-image: linear-gradient(to left top, yellow, green);
34         }
35 
36         /*用关键字来确定方向*/
37         .item:nth-child(8) .linear-gradient {
38             background-image: linear-gradient(135deg, yellow, green);
39         }
40         
41         /*控制渐变*/
42         .item:nth-child(9) .linear-gradient {
43             background-image: linear-gradient(to left, yellow 20%, green 40%, blue);
44         }
45 
46 
47         .item:nth-child(10) .linear-gradient {
48             background-image: linear-gradient(to left, yellow 50%, green 50%);
49         }
50 
51         /*
52             0 - 50
53             50 - 50
54             50 - 100
55         */
56 
57         .item:nth-child(11) .linear-gradient {
58             background-image: linear-gradient(to left, yellow 50%, green 40%, blue 50%);
59         }
60 
61         /*
62             0 - 50
63             40 - 50
64             50 - 100
65         */