1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
|
---
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("<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>
|
