path: root/files/zh-cn/web/css/repeating-linear-gradient()/index.html

---
title: repeating-linear-gradient
slug: Web/CSS/repeating-linear-gradient()
translation_of: Web/CSS/repeating-linear-gradient()
---
<div>{{CSSRef}}</div>

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

<pre class="brush: css no-line-numbers notranslate">/* 一个倾斜45度的重复线性渐变,
   从蓝色开始渐变到红色 */
repeating-linear-gradient(45deg, blue, red);

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

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

<p> </p>

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

<p>与其他渐变一样，线形重复渐变没有提供 <a href="https://developer.mozilla.org/en-US/docs/CSS/image#no_intrinsic">固定的尺寸</a>；即, 它没有原始尺寸或首选尺寸，也没有首选的比列。它将自适应于对应元素的尺寸。</p>

<div class="note">
<p><strong>提示：</strong> 因为 <code>&lt;gradient&gt;</code> 属于<code>&lt;image&gt;</code> 数据类型，所以只能在可以使用 <code>&lt;image&gt;</code>的地方使用它们。因此<code>repeating-linear-gradient()</code> 不适用于{{Cssxref("background-color")}}以及使用 {{cssxref("&lt;color&gt;")}} 数据类型的地方。</p>
</div>

<h2 id="语法">语法</h2>

<h3 id="值">值</h3>

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

<h3 id="形式语法">形式语法</h3>

<pre class="syntaxbox notranslate">repeating-linear-gradient(  [ <a href="/en-US/CSS/angle">&lt;angle&gt;</a> | to &lt;side-or-corner&gt; ,]? &lt;color-stop&gt; [, &lt;color-stop&gt;]+ )
                            \---------------------------------/ \----------------------------/
                              渐变轴的定义                                色标列表

where <code>&lt;side-or-corner&gt; = [left | right] || [top | bottom]</code>
   and <code>&lt;color-stop&gt;     = &lt;color&gt; [ &lt;percentage&gt; | &lt;length&gt; ]?</code>
</pre>

<h2 id="示例">示例</h2>

<div id="Example_shown">
<pre class="brush: css notranslate">#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);
}
</pre>

<pre class="brush: html notranslate">&lt;ol&gt;
  &lt;li&gt;Repeating horizontal bars
    &lt;div id="grad1"&gt;&lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;Zebra stripes
    &lt;div id="grad2"&gt;&lt;/div&gt;
  &lt;/li&gt;
&lt;/ol&gt;</pre>
</div>

<div id="Example_hidden" style="display: none;">
<pre class="brush: css notranslate">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);
}
</pre>

<pre class="brush: html notranslate">&lt;ol&gt;
  &lt;li&gt;repeating gradient
    &lt;div id="grad1"&gt;&lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;Zebra pattern
    &lt;div id="grad2"&gt;&lt;/div&gt;
  &lt;/li&gt;
&lt;/ol&gt;</pre>
</div>

<p>{{EmbedLiveSample('Example_hidden', '300px', '300px', '')}}</p>

<h2 id="规格">规格</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规格</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}</td>
   <td>{{Spec2('CSS3 Images')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Firefox (Gecko)</th>
   <th>Chrome</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}})</td>
   <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}<sup>[3]</sup><br>
    {{CompatGeckoDesktop("16")}}<sup>[5]</sup></td>
   <td>10.0 (534.16){{property_prefix("-webkit")}} <sup>[2]</sup><sup>[3]</sup></td>
   <td>10.0 <sup>[1]</sup></td>
   <td>11.10{{property_prefix("-o")}} <sup>[3]</sup></td>
   <td>5.1{{property_prefix("-webkit")}}<sup>[2]</sup><sup>[3]</sup></td>
  </tr>
  <tr>
   <td>On {{cssxref("border-radius")}}</td>
   <td>{{CompatGeckoDesktop("29")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>On any other property that accept {{cssxref("&lt;image&gt;")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/">Legacy webkit syntax</a>{{non-standard_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>3{{property_prefix("-webkit")}} <sup>[2]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>4.0{{property_prefix("-webkit")}}<sup>[2]</sup></td>
  </tr>
  <tr>
   <td>Legacy <em>from </em>syntax (without <code>to</code>){{non-standard_inline}}</td>
   <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}<sup>[4]</sup><br>
    Removed in {{CompatGeckoDesktop("16")}}<sup>[7]</sup></td>
   <td>10.0 (534.16){{property_prefix("-webkit")}} <sup>[2]</sup></td>
   <td>10.0</td>
   <td>11.10{{property_prefix("-o")}}<sup>[4]</sup></td>
   <td>5.1{{property_prefix("-webkit")}}<sup><a href="#bc2%3E">[2]</a></sup></td>
  </tr>
  <tr>
   <td><code>to</code> syntax</td>
   <td>{{CompatGeckoDesktop("10")}}{{property_prefix("-moz")}}<sup>[4]</sup><br>
    {{CompatGeckoDesktop("16")}}</td>
   <td>26.0</td>
   <td>10.0</td>
   <td>11.60{{property_prefix("-o")}}<sup>[4]</sup><br>
    Presto 2.12 will remove the prefix.</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><a href="https://drafts.csswg.org/css-images-4/#color-interpolation-hint">Interpolation hints/gradient midpoints</a> (a percent without a color)</td>
   <td>{{CompatGeckoDesktop("36")}}</td>
   <td><a href="https://code.google.com/p/chromium/issues/detail?id=420527">40</a></td>
   <td>{{CompatUnknown}}</td>
   <td>27</td>
   <td>{{CompatVersionUnknown}}<sup><a href="#bc2%3E">[6]</a></sup></td>
  </tr>
  <tr>
   <td>Unitless 0 for <code>&lt;angle&gt;</code></td>
   <td>{{CompatGeckoDesktop("46")}}{{property_prefix("-webkit")}}<sup>[8]</sup><br>
    {{CompatNo}}<sup>[9]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>Edge 12</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Firefox (Gecko)</th>
   <th>Chrome</th>
   <th>Internet Explorer</th>
   <th>Opera (Presto)</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}<sup>[3]</sup><br>
    {{CompatGeckoMobile("16")}}<sup>[5]</sup></td>
   <td>
    <p>16{{property_prefix("-webkit")}}<br>
     26</p>
   </td>
   <td>10</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}<sup><a href="#bc2%3E">[6]</a></sup></td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Internet Explorer 5.5 through 9.0 supports proprietary <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code> filter</a>.</p>

<p>[2] WebKit since 528 supports the legacy <a class="external" href="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html"><code>-webkit-gradient(linear,…)</code> function</a>. 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 <code>-webkit-linear-gradient()</code>. You can achieve the same effect by offsetting the color stops.</p>

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

<p>[4] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the <code>to</code> keyword, and effectively considered as a <em>from</em> position. The <code>to</code> 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:</p>

<pre class="notranslate">-moz-repeating-linear-gradient(to top left, blue, red);</pre>

<p>is the same as:</p>

<pre class="notranslate">-moz-repeating-linear-gradient(bottom right, blue, red);</pre>

<p>The legacy syntax, without <code>to</code>, is planned to go away when the prefix is removed.</p>

<p>[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.</p>

<p>[6] {{webkitbug(1074056)}}.</p>

<p>[7] In addition to the unprefixed support using the standard syntax, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit</code> prefixed version of the function using the legacy 'from' syntax for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p>

<p>[8] In <code>-webkit-linear-gradient </code>function (handled below), Gecko accept unitless 0 for angles, to match webkit/blink,See {{bug("1239153")}}.</p>

<p>[9] See {{bug("1363292")}}.</p>

<h2 id="了解更多">了解更多</h2>

<ul>
 <li><a href="/en/CSS/Using_CSS_gradients">使用CSS渐变</a></li>
 <li>其他渐变方法: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-radial-gradient")}}</li>
</ul>