导语：
线性渐变
background-image: linear-gradient(red,yellow,green); /*默认从上到下渐变*/
可以使用关键词设置线性渐变的方向
background-image: linear-gradient(to right, red, yellow, green); /*从左往右渐变*/
background-image: linear-gradient(to top,red,yellow,green); /*从下到上渐变*/
使用角度值设置线性渐变的方向
background-image: linear-gradient(36deg, red, yellow, green); /*渐变角度值偏移36deg*/
调整开始渐变的位置
background-image: linear-gradient(red 50px, yellow 100px, green 150px);
径向渐变
background-image: radial-gradient(red,yellow,green);
使用关键词调整渐变圆的圆心位置
background-image: radial-gradient(at right top, red, yellow, green); /*at 表示圆心在... ; right top 表示右上角， */
使用像素值调整渐变圆的圆心位置
background-image: radial-gradient(at 100px 50px,red,yellow,green); /*100 表示，以左上角为奇点，距离 x 坐标距离，50 为 y 轴坐标距离*/
调整渐变形状为正圆
background-image: radial-gradient(circle, red, yellow, green);
调整形状的半径
调整开始渐变的位置
锥形渐变
background-image: conic-gradient(red, pink, #125cbe, #17c356, #7612be, #5aacd0, #4b8eaa, #be7112, #c01366);
循环重复渐变
- 使用
repeating-linear-gradient进行重复线性渐变，具体参数同linear-gradient - 使用
repeating-radial-gradient进行重复径向渐变，具体参数同radial-gradient