aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/css/gradient/repeating-linear-gradient()
diff options
context:
space:
mode:
authorMDN <actions@users.noreply.github.com>2022-03-19 00:13:08 +0000
committerMDN <actions@users.noreply.github.com>2022-03-19 00:13:08 +0000
commit9bf6693b2edd5281c1577856895c55653a41dc01 (patch)
tree0143e1d1d5c95776e42d8d9afdddedb13a0827c1 /files/zh-cn/web/css/gradient/repeating-linear-gradient()
parent376471eb81e0a3dc263128f834e3c8c22bb9b4d6 (diff)
downloadtranslated-content-9bf6693b2edd5281c1577856895c55653a41dc01.tar.gz
translated-content-9bf6693b2edd5281c1577856895c55653a41dc01.tar.bz2
translated-content-9bf6693b2edd5281c1577856895c55653a41dc01.zip
[CRON] sync translated content
Diffstat (limited to 'files/zh-cn/web/css/gradient/repeating-linear-gradient()')
-rw-r--r--files/zh-cn/web/css/gradient/repeating-linear-gradient()/index.html170
1 files changed, 0 insertions, 170 deletions
diff --git a/files/zh-cn/web/css/gradient/repeating-linear-gradient()/index.html b/files/zh-cn/web/css/gradient/repeating-linear-gradient()/index.html
deleted file mode 100644
index 007a1eb361..0000000000
--- a/files/zh-cn/web/css/gradient/repeating-linear-gradient()/index.html
+++ /dev/null
@@ -1,170 +0,0 @@
----
-title: repeating-linear-gradient()
-slug: Web/CSS/gradient/repeating-linear-gradient()
-translation_of: Web/CSS/gradient/repeating-linear-gradient()
-tags:
- - CSS
- - CSS Function
- - CSS Images
- - Function
- - Gradients
- - Graphics
- - Layout
- - Reference
- - Web
-browser-compat: css.types.image.gradient.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" class="hidden">
-<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>
-
-{{Compat("css.types.image.gradient.repeating-linear-gradient")}}
-
-<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>