线性渐变

/*标准写法*/
        .item:nth-child(1) .linear-gradient {
            background-image: linear-gradient(yellow, green);
        }
        
        /*多个颜色渐变*/
        .item:nth-child(2) .linear-gradient {
            background-image: linear-gradient(yellow, green, red, blue);
        }
        
        /*用角度确定方向*/
        .item:nth-child(3) .linear-gradient {
            background-image: linear-gradient(0, yellow, green);
        }

        /*用角度确定方向 正上方为0度 顺时针旋转*/
        .item:nth-child(4) .linear-gradient {
            background-image: linear-gradient(90deg, yellow, green);
        }
        
        /*用角度确定方向 180deg 正上方为0度 顺时针旋转*/
        .item:nth-child(5) .linear-gradient {
            background-image: linear-gradient(180deg, yellow, green);
        }

        /*用关键字来确定方向*/
        .item:nth-child(6) .linear-gradient {
            background-image: linear-gradient(to top, yellow, green);
        }

        /*用关键字来确定方向*/
        .item:nth-child(7) .linear-gradient {
            background-image: linear-gradient(to left top, yellow, green);
        }

        /*用关键字来确定方向*/
        .item:nth-child(8) .linear-gradient {
            background-image: linear-gradient(135deg, yellow, green);
        }
        
        /*控制渐变*/
        .item:nth-child(9) .linear-gradient {
            background-image: linear-gradient(to left, yellow 20%, green 40%, blue);
        }


        .item:nth-child(10) .linear-gradient {
            background-image: linear-gradient(to left, yellow 50%, green 50%);
        }

        /*
            0 - 50
            50 - 50
            50 - 100
        */

        .item:nth-child(11) .linear-gradient {
            background-image: linear-gradient(to left, yellow 50%, green 40%, blue 50%);
        }

        /*
            0 - 50
            40 - 50
            50 - 100
        */