百科网站开发阿里云域名注册网站
配合 background 和 background-image 可以实现线性（linear）和辐射（radial）渐变。
线性渐变
linear-gradient 可以实现线性渐变。
background: linear-gradient(yellow, red);
上例代码表示颜色从 “yellow” 渐变到 “red”。
还可以指定渐变方向：
background: linear-gradient(to right, orange, red);
“to right” 表示向右渐变。
background: linear-gradient(to bottom right, orange, red);
“to bottom right” 表示向右下角渐变。
background: linear-gradient(20deg, orange, red);
“20deg” 表示向 20 度角的方向渐变。
上例代码只指定了两个颜色，但多个颜色也没问题：
background: linear-gradient(hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%));
辐射渐变
辐射渐变和线性渐变的道理是一样的，只不过它的渐变方向是从中心往四周辐射。
background: radial-gradient(yellow, green);
当然也可以指定颜色辐射的形状：
background: radial-gradient(circle, yellow, green);
还可以指定辐射方向：
- closest-side - 最近边
- closest-corner - 最近角
- farthest-side - 最远边
- farthest-corner - 最远角
background: radial-gradient(circle closest-side, yellow, green);
以及辐射原点：
background: radial-gradient(at top left, yellow, green);
Color stops
如果把渐变方向看做一条直线，那 color stops 就是上面的点，如果我们给点指定颜色，那点与点之间的区域便是渐变发生的地方。
linear-gradient(black 0, white 100%)- 等价于gradient(black, white)radial-gradient(#06c 0, #fc0 50%, #039 100%)- 等价于radial-gradient(#06c, #fc0, #039)linear-gradient(red 0%, green 33.3%, blue 66.7%, black 100%)- 等价于linear-gradient(red, green, blue, black)
可以看出，如果没有指定 color stops，那么点在线上的位置是一个等差数列。
我们打破这个「均分」，随意定义数列：
background: linear-gradient(135deg, hsl(36,100%,50%) 10%, hsl(72,100%,50%) 60%, white 90%);
重复渐变
repeating-linear-gradient 和 repeating-radial-gradient 可以实现重复渐变：
background: repeating-linear-gradient(white, black 15px, white 30px);
如果颜色后面不跟数值，默认取值 0，表示起点。
background: repeating-radial-gradient(black, black 15px, white 15px, white 30px);
