线性渐变
CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于 <gradient> 数据类型,是一种特别的 <image> 数据类型。
1 | /* 渐变轴为45度,从蓝色渐变到红色 */ |
语法: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 | background: radial-gradient(#e66465, #9198e5); |
重复渐变
重复多次渐变图案直到足够填满指定元素。由 repeating-linear-gradient() 和 repeating-radial-gradient() 函数产生。
1 | .linear-repeat { |