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 - 5053             50 - 5054             50 - 10055         */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 - 5063             40 - 5064             50 - 10065         */