渐变:颜色逐渐变化的过程,从一种颜色过渡到另一种颜色的过程;
1.线性渐变
2.径向渐变
1.线性渐变
linear-gradient(渐变的方向-终点的位置,颜色1,颜色2,颜色3…)
1.颜色值一定要大于两种;
2.终点位置(to top,to bottom,to right,to left,to left top…)
终点位置还可以使用角度,12点钟的位置为0度,顺时针旋转角度为正方向;
3.可以使用百分比设置颜色渐变的范围大小,按百分比位置开始渐变,不设置则平均分配。
background-image: linear-gradient(to left top,green 30%,red 50%,yellow 90%,blue);
2.径向渐变
radial-gradient (x轴的半径 y轴的半径 at 圆心位置x )
background-image:radial-gradient(50% 50% at center center,green 30%,red 50%,yellow 90%,blue);