diff options
Diffstat (limited to 'files/zh-cn/web/css/gradient/repeating-linear-gradient/index.html')
| -rw-r--r-- | files/zh-cn/web/css/gradient/repeating-linear-gradient/index.html | 171 |
1 files changed, 171 insertions, 0 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 new file mode 100644 index 0000000000..b9e09acb59 --- /dev/null +++ b/files/zh-cn/web/css/gradient/repeating-linear-gradient/index.html @@ -0,0 +1,171 @@ +--- +title: repeating-linear-gradient() +slug: Web/CSS/gradient/repeating-linear-gradient +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Gradients + - Graphics + - Layout + - Reference + - Web +translation_of: Web/CSS/gradient/repeating-linear-gradient() +original_slug: Web/CSS/gradient/repeating-linear-gradient() +browser-compat: css.types.image.gradient.repeating-linear-gradient +--- +<div>{{CSSRef}}</div> + +<p>CSS函数 <strong><code>repeating-linear-gradient()</code></strong> 创建一个由重复线性渐变组成的{{cssxref("<image>")}}， 这是一个类似 {{cssxref("linear-gradient")}} 的函数，并且采用相同的参数，但是它会在所有方向上重复渐变以覆盖其整个容器. 这个函数的结果是一个{{cssxref("<gradient>")}} 数据类型的对象, 这是一个特殊的{{cssxref("<image>")}}类型。</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><gradient></code> 属于<code><image></code> 数据类型，所以只能在可以使用 <code><image></code>的地方使用它们。因此<code>repeating-linear-gradient()</code> 不适用于{{Cssxref("background-color")}}以及使用 {{cssxref("<color>")}} 数据类型的地方。</p> +</div> + +<h2 id="语法">语法</h2> + +<h3 id="值">值</h3> + +<dl> + <dt><code><side-or-corner></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("<angle>")}}</dt> + <dd>用角度值指定渐变的方向（或角度）。角度顺时针增加。 </dd> + <dt><code><color-stop></code></dt> + <dd>由一个{{cssxref("<color>")}}值组成，并且跟随着一个可选的终点位置（可以是一个{{cssxref("<percentage>")}}或者是沿着渐变轴的{{cssxref("<length>")}}）。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"><angle></a> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ ) + \---------------------------------/ \----------------------------/ + 渐变轴的定义 色标列表 + +where <code><side-or-corner> = [left | right] || [top | bottom]</code> + and <code><color-stop> = <color> [ <percentage> | <length> ]?</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"><ol> + <li>Repeating horizontal bars + <div id="grad1"></div> + </li> + <li>Zebra stripes + <div id="grad2"></div> + </li> +</ol></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"><ol> + <li>repeating gradient + <div id="grad1"></div> + </li> + <li>Zebra pattern + <div id="grad2"></div> + </li> +</ol></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> |