线性渐变

CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于 <gradient> 数据类型,是一种特别的 <image> 数据类型。

1
2
3
4
5
6
7
8
/* 渐变轴为45度,从蓝色渐变到红色 */
background-image: linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
background-image: linear-gradient(to left top, blue, red);

/* 从下到上,从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
background-image: linear-gradient(0deg, blue, green 40%, red);

语法:linear-gradient([ [ [ <angle> | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);

第一个参数 angle 代表了渐变的角度,可以使用 to [top|bottom|left|right] 代表向上下左右,top top 相当于 0deg,角度顺时针增加。 color-stop 由一个 <color> 值组成,并且跟随着一个可选的终点位置(可以是一个百分比值或者是沿着渐变轴的 <length> )。

径向渐变

CSS radial-gradient() CSS函数创建了一个图像,该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成。它的形状可以是圆形(circle)或椭圆形(ellipse)。这个方法得到的是一个CSS <gradient> 数据类型的对象,其是 <image> 的一种。

1
2
3
4
5
background: radial-gradient(#e66465, #9198e5);
background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);
background: radial-gradient(ellipse at top, #e66465, transparent),
radial-gradient(ellipse at bottom, #4d9f0c, transparent);

重复渐变

重复多次渐变图案直到足够填满指定元素。由 repeating-linear-gradient() 和 repeating-radial-gradient() 函数产生。

1
2
3
4
5
6
7
8
.linear-repeat {
background: repeating-linear-gradient(to top left,
lightpink, lightpink 5px, white 5px, white 10px);
}

.radial-repeat {
background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px);
}