渐变

线性渐变

1. 多个颜色之间的渐变,默认从上到下渐变
   ​background-img:linear-gradient(color1,color2,....)​
2. 使用关键词设置渐变的方向
   ​background-img:linear-gradient(to top/right bottom/right,color1,color2,....)​
3. 使用角度设置渐变的方向
   ​background-img:linear-gradient(x deg,color1,color2,....)​
4. 调整渐变角开始的位置
   ​background-img:linear-gradient(color1 x px,color2 x px,....)​

径向渐变

1. 多个颜色之间的渐变,默认从圆心四散(不一定是正圆,要看容器本身宽高比)
   ​background-img:radial-gradient(color1,color2,....)​
2. 使用关键词调整渐变圆的圆心位置
   ​background-img:radial-gradient(at top/right bottom/right,color1,color2,....)​
3. 使用像素调整渐变圆的圆心位置
   ​background-img:radial-gradient(at x px y px,color1,color2,....)​
4. 调整渐变形状为正圆
   ​background-img:radial-gradient(circle,color1,color2,....)​
5. 调整形状的半径
   ​background-img:radial-gradient(x px y px,color1,color2,....)​
6. 调整渐变的位置
   ​background-img:radial-gradient(color1 x px,color2 x px,....)​

重复渐变

在线性渐变或径向渐变前面加repeating-