线性渐变
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);
}