当前位置：文江博客知识库简体中文文档 Web CSS repeating-linear-gradient

repeating-linear-gradient - CSS（层叠样式表）编辑

CSS函数 repeating-linear-gradient() 创建一个由重复线性渐变组成的<image>，这是一个类似 linear-gradient 的函数，并且采用相同的参数，但是它会在所有方向上重复渐变以覆盖其整个容器. 这个函数的结果是一个<gradient> 数据类型的对象, 这是一个特殊的<image>类型。

/* 一个倾斜45度的重复线性渐变,
   从蓝色开始渐变到红色 */
repeating-linear-gradient(45deg, blue, red);

/* 一个从右下角到左上角的重复线性渐变,
   从蓝色开始渐变到红色 */
repeating-linear-gradient(to left top, blue, red);

/* 一个由下至上的重复线性渐变,
   从蓝色开始，40%后变绿，
   最后渐变到红色 */
repeating-linear-gradient(0deg, blue, green 40%, red);

每次重复时，色标位置的偏移量都是基准渐变长度（最后一个色标和第一个之间的距离）的倍数。因此，最后色标的色值应该与第一个色标的色值保持一致；如果不一致的话，会导致非常突兀的渐变效果。

与其他渐变一样，线形重复渐变没有提供固定的尺寸；即, 它没有原始尺寸或首选尺寸，也没有首选的比列。它将自适应于对应元素的尺寸。

提示： 因为 <gradient> 属于<image> 数据类型，所以只能在可以使用 <image>的地方使用它们。因此repeating-linear-gradient() 不适用于background-color以及使用 <color> 数据类型的地方。

语法

值

<side-or-corner>: 描述渐变线的起始点位置。它包含两个关键词：第一个指出垂直位置left or right，第二个指出水平位置top or bottom。关键词的先后顺序无影响，且都是可选的。; to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。
<angle>: 用角度值指定渐变的方向（或角度）。角度顺时针增加。
<color-stop>: 由一个<color>值组成，并且跟随着一个可选的终点位置（可以是一个<percentage>或者是沿着渐变轴的<length>）。CSS渐变的颜色渲染采取了与SVG相同的规则。; 提示：渲染颜色中间点的规则CSS渐变中的色标与SVG渐变一致.

形式语法

repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
                            \---------------------------------/ \----------------------------/
                              渐变轴的定义                                色标列表

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

示例

#grad1 {
  background-image: repeating-linear-gradient(180deg,
      rgb(26,198,204),
      rgb(26,198,204) 7%,
      rgb(100,100,100) 10%);
}

#grad2 {
  background-image: repeating-linear-gradient(-45deg,
      transparent,
      transparent 25px,
      rgba(255,255,255,1) 25px,
      rgba(255,255,255,1) 50px);
}

<ol>
  <li>Repeating horizontal bars
    <div id="grad1"></div>
  </li>
  <li>Zebra stripes
    <div id="grad2"></div>
  </li>
</ol>

div {
  display: block;
  width: 50%;
  height: 80px;
  border-color: #000000;
  padding: 10px;
}

#grad1 {
  background-image: -moz-repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%);
  background-image: -webkit-repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%);
  background-image: -o-repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%);
  background-image: repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%);
}

#grad2 {
  background-color: black;
  background-image: -moz-repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px);
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px);
  background-image: -o-repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px);
  background-image: -ms-repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px);
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px);
}

<ol>
  <li>repeating gradient
    <div id="grad1"></div>
  </li>
  <li>Zebra pattern
    <div id="grad2"></div>
  </li>
</ol>

规格

规格	状态	备注
CSS Images Module Level 3 repeating-linear-gradient()	Candidate Recommendation	Initial definition.

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Desktop
Mobile

Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Basic support (on `background` and `background-image`)	3.6 (1.9.2)-moz^[3] 16 (16)^[5]	10.0 (534.16)-webkit ^[2]^[3]	10.0 ^[1]	11.10-o ^[3]	5.1-webkit^[2]^[3]
On `border-radius`	29 (29)	(Yes)	(Yes)	(Yes)	(Yes)
On any other property that accept `<image>`	未实现	(Yes)	(Yes)	(Yes)	(Yes)
Legacy webkit syntax	未实现	3-webkit ^[2]	未实现	未实现	4.0-webkit^[2]
Legacy from syntax (without `to`)	3.6 (1.9.2)-moz^[4] Removed in 16 (16)^[7]	10.0 (534.16)-webkit ^[2]	10.0	11.10-o^[4]	5.1-webkit^[2]
`to` syntax	10 (10)-moz^[4] 16 (16)	26.0	10.0	11.60-o^[4] Presto 2.12 will remove the prefix.	未实现
Interpolation hints/gradient midpoints (a percent without a color)	36 (36)	40	?	27	(Yes)^[6]
Unitless 0 for `<angle>`	46 (46)-webkit^[8] 未实现^[9]	(Yes)	Edge 12	(Yes)	(Yes)

Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera (Presto)	Safari
Basic support	1.0 (1.9.2)-moz^[3] 16.0 (16)^[5]	16-webkit 26	10	(Yes)	(Yes)^[6]

[1] Internet Explorer 5.5 through 9.0 supports proprietary filter: progid:DXImageTransform.Microsoft.Gradient() filter.

[2] WebKit since 528 supports the legacy -webkit-gradient(linear,…) function. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in -webkit-linear-gradient(). You can achieve the same effect by offsetting the color stops.

[3] Gecko, Opera & Webkit considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right. This is different from the latest specification where an angle of 0deg as a direction indicator points to the top. Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.

[4] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the to keyword, and effectively considered as a from position. The to syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:

-moz-repeating-linear-gradient(to top left, blue, red);

is the same as:

-moz-repeating-linear-gradient(bottom right, blue, red);

The legacy syntax, without to, is planned to go away when the prefix is removed.

[5] Before Firefox 36, Gecko didn't apply gradient on the pre-multiplied color space, leading to shade of grey unexpectedly appearing when used with transparency.

[6] WebKit bug 1074056.

[7] In addition to the unprefixed support using the standard syntax, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit prefixed version of the function using the legacy 'from' syntax for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[8] In -webkit-linear-gradientfunction (handled below), Gecko accept unitless 0 for angles, to match webkit/blink,See bug 1239153.

[9] See bug 1363292.