线性梯度 | linear-gradient

linear-gradient()创建两种或多种颜色之间的线性，渐进转换。其结果是<gradient>数据类型的一个对象，这是一种特殊的类型<image>。

/* A gradient tilted 45 degrees,
   starting blue and finishing red */
linear-gradient(45deg, blue, red);

/* A gradient going from the bottom right to the top left corner,
   starting blue and finishing red */
linear-gradient(to left top, blue, red);

/* A gradient going from the bottom to top,
   starting blue, turning green at 40% of its length,
   and finishing red */
linear-gradient(0deg, blue, green 40%, red);

与任何梯度一样，线性梯度具有没有内在维度也就是说，它没有自然的或优先的大小，也没有优先的比率。它的具体大小将与它所应用的元素的大小相匹配。

若要创建一个linear-gradient重复以便填充其容器的，请使用repeating-linear-gradient()功能代替。

使用说明：因为<gradient>属于<image>数据类型，它们只能在<image>可以用。因此，linear-gradient() background-color和其他使用<color>数据类型。

线性梯度的合成

线性梯度由一个轴定义-梯度线-两个或两个以上色站轴上的每个点都是不同的颜色；要创建平滑的渐变，linear-gradient()函数绘制一系列与渐变线垂直的彩色线，每一条与渐变线相交点的颜色相匹配。

渐变线由包含渐变图像的框的中心和角度定义。渐变的颜色由两个或多个点决定：起点，终点，以及中间的可选颜色停止点。

起点是在所述第一颜色开始渐变线的位置。在结束点就是最后一种颜色结束点。这两个点中的每一个都由梯度线与从相同象限中的盒子角通过的垂直线的交点定义。终点可以简单地理解为起点的对称点。这些有些复杂的定义导致了一个有趣的效果，有时被称为魔术角：最接近起点和终点的角与它们各自的起点或终点具有相同的颜色。

通过在渐变线上添加更多色彩停止点，可以在开始和结束色彩之间创建高度自定义的过渡。可以通过使用 <length>或<percentage>来明确定义颜色停止的位置。如果不指定位置，则将其放置在前一个和后一个之间。

句法

取值

<side-or-corner>渐变线起点的位置。如果指定，则由单词to和最多两个关键字组成：一个表示水平面（left或right），另一个表示垂直面（top或bottom）。侧面关键字的顺序无关紧要。如果未指定，则默认为tobottom.值to top，to bottom，to left，和to right等同于角度0deg，180deg，270deg，和90deg分别。其他值被翻译成一个角度。<angle>梯度线的方向角度。从头开始，to top顺时针旋转。<color-stop>一个颜色停止的<color>值，后跟一个可选的停止位置（a <percentage>或<length>沿着渐变轴）。

注：渲染CSS渐变中的颜色停止在颜色停止时遵循相同的SVG梯度规则

形式语法

linear-gradient( 
  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
  \---------------------------------/ \----------------------------/
    Definition of the gradient line        List of color stops  

where <side-or-corner> = [left | right] || [top | bottom]
  and <color-stop>     = <color> [ <percentage> | <length> ]?

实例

45度角梯度

可以沿渐变轴指定位置，每个位置都有一个颜色，称为“颜色停止”，每个颜色停止之间的区域彼此平滑过渡。渐变中的任何一种颜色形成垂直于渐变轴的直线。在下图中，渐变的轴从div的左上角开始，指向45度角。指定了两个色块，红色和蓝色。

<div style="width: 200px; height: 200px;"></div>

div {
  background: linear-gradient(135deg, red, blue);
}

起始于渐变线的60％的渐变

有时我们不希望从行首开始的渐变，但稍后。为了达到这个目的，在想要开始渐变的地方添加一个颜色相同的颜色。

<div style="width: 200px; height: 200px;"></div>

div {
  background: linear-gradient(135deg, red, red 60%, blue);
}

多色停止梯度

如果第一个颜色停止没有<length>或<percentage>，默认为0%。如果最后一个颜色停止没有<length>或<percentage>，默认为100%。如果颜色停止没有指定的位置，并且它是%27T第一个或最后一个停止，那么它被分配的位置是前一个停止和下一个停止之间的一半。

必须按顺序指定颜色停止。如果必要时，在为第一个和最后一个停止分配默认值之后，如果一个颜色停止的指定位置小于列表中任何颜色停止的指定位置。它的位置被更改为等于它之前任何颜色停止的最大指定位置。

<div>A rainbow made from a gradient</div>

div {
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

重复线性梯度

linear-gradient不允许重复梯度。默认情况下，渐变将伸展以填充定义的元素。有关此功能，请参阅repeating-linear-gradient()。

使用透明度

<div>Linear gradient with transparency</div>

div {
  background: linear-gradient(to bottom right, red, transparent);
}

background-size如果使用固定单位指定所有点和长度，则不受渐变背景的影响（与百分比或关键字相对，而不是相对于值background-size）。

规格

Specification	Status	Comment
CSS Image Values and Replaced Content Module Level 3The definition of 'linear-gradient()' in that specification.	Candidate Recommendation	Initial definition.
CSS Image Values and Replaced Content Module Level 4The definition of 'Gradient Color-Stops' in that specification.	Working Draft	Add interpolation hints.

浏览器兼容性

Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera (Presto)	Safari
Basic support (on background and background-image)	3.6 (1.9.2)-moz1 16 (16)2	10.0 (534.16)-webkit6	10.04	11.10-o1	5.1-webkit6
On border-radius	29 (29)	(Yes)	(Yes)	(Yes)	(Yes)
On any other property that accepts <image>	No support	(Yes)	(Yes)	(Yes)	(Yes)
Legacy webkit syntax	No support	3-webkit3	No support	No support	4.0-webkit3
Legacy 'from' syntax (without to)	3.6 (1.9.2)-moz5	10.0 (534.16)-webkit3	10	11.10-o5	5.1-webkit3
Standard syntax (using the to keyword)	16 (16)	26.0 (537.27)	10	12.10	6.1
Interpolation hints/gradient midpoints (a percent without a color)	36 (36)	40	?	27	?
Unitless 0 for <angle>	46 (46)-webkit7 55 (55)7	(Yes)	Edge 12	(Yes)	(Yes)

Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera (Presto)	Safari
Basic support (on background and background-image)	1.0 (1.9.2)-moz1 16.0 (16)2	16-webkit 26	10	(Yes)	(Yes)
On border-radius	?	?	?	?	?
On any other property that accepts <image>	?	?	?	?	?
Legacy webkit syntax	?	?	?	?	?
Legacy 'from' syntax (without to)	?	?	?	?	?
Standard syntax (using the to keyword)	?	?	?	?	?
Interpolation hints/gradient midpoints (a percent without a color)	?	?	?	?	?

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18