渐变

线性渐变

1.控制角度

background: linear-gradient(60deg,red,yellow,green);

2.通过方向

background: linear-gradient(to left bottom,red,yellow,green);

弧形渐变

        div{
            width: 300px;
            height: 300px;
            border-radius: 50%;
            margin: 100px auto;
        }
        #box1{
            background: radial-gradient(silver,blue);
        }
        #box2{  
            height: 150px;
            background: radial-gradient(silver,blue);
        }
        #box3{
            background: radial-gradient(silver,blue,yellow,green,red);
        }
        #box4{
            background: radial-gradient(40px,white,blue);
        }
        #box5{
            /*可以控制方向*/
            background: radial-gradient(at left,silver,blue);
        }
        #box6{
            background: repeating-radial-gradient(40px,silver,blue);
        }