CSS中的渐变

线性渐变

background-image: linear-gradient(red,orange

,yellow,green,rgb(73, 148, 73),blue,purple);

也可以指定角度方向渐变background-image: linear-gradient(45deg,green,yellow,

也可以指定渐变的方向background-image: linear-gradient(90deg,blue 0 100px,white 100px 200px,red 200px 300px

径向渐变

background-image: radial-gradient(半径,颜色1 起始位置 结束位置,颜色2 起始位置 结束位置);

background-image: radial-gradient(半径1,半径2,颜色1 起始位置 结束位置,颜色2 起始位置 结束位置);

圆心起点background-image: radial-gradient(半径 at 100px 70px,颜色1 起始位置 结束位置,颜色2 起始位置 结束位置);

background-image: repeating-linear-gradient();重复线性渐变

background-image: repeating-radial-gradient();重复径向渐变