一、线性渐变
多种颜色之间的渐变，默认从上到下。也可以使用关键词设置线性渐变的方向，to，代表往哪儿去，联合top\right\bottom\left，就规定了向上\右\下\左的方向渐变过度；也可以使用角度值（例：90deg）设置线性渐变的方向
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 轴坐标距离*/
<!--调整渐变形状为正圆，使用 circle 关键字可设置渐变为正圆 -->
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若有收获，就点个赞吧