files/zh-cn/web/css/gradient/repeating-radial-gradient()/index.html


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
171
172
173
174
175
176
177
178
179
180
181

---
title: repeating-radial-gradient()
slug: Web/CSS/gradient/repeating-radial-gradient()
translation_of: Web/CSS/gradient/repeating-radial-gradient()
tags:
  - CSS
  - CSS Function
  - CSS Images
  - Function
  - Gradients
  - Graphics
  - Layout
  - Reference
  - Web
browser-compat: css.types.image.gradient.repeating-radial-gradient
---
<div>{{CSSRef}}</div>

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

<pre class="brush: css no-line-numbers notranslate">/* 一个从容器中心点开始的重复渐变,
   从红色开始，渐变到蓝色，再渐变到绿色 */
repeating-radial-gradient(circle at center, red 0, blue, green 30px);
</pre>

<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>{{cssxref("&lt;position&gt;")}}</dt>
 <dd><code>position</code>与 {{cssxref("background-position")}} 或者 {{cssxref("transform-origin")}}类似。默认值为 <code>center</code>.</dd>
 <dt>{{cssxref("&lt;angle&gt;")}}</dt>
 <dd>渐变轴的角度。角度顺时针增加，默认值为<code>0deg</code>。</dd>
 <dt>{{cssxref("&lt;shape&gt;")}}</dt>
 <dd>渐变的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对称椭圆）。默认值为椭圆。默认值为椭圆形，即 <code>ellipse</code>。</dd>
 <dt><code>&lt;extent-keyword&gt;</code></dt>
 <dd>关键字用于描述边缘轮廓的具体位置。以下为关键字常量：</dd>
 <dd>
 <table class="standard-table">
  <tbody>
   <tr>
    <th>Keyword</th>
    <th>Description</th>
   </tr>
   <tr>
    <td><code>closest-side</code></td>
    <td>渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。</td>
   </tr>
   <tr>
    <td><code>closest-corner</code></td>
    <td>渐变的边缘形状与容器距离渐变中心点最近的一个角相交。</td>
   </tr>
   <tr>
    <td><code>farthest-side</code></td>
    <td>与 <code>closest-side</code>相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。</td>
   </tr>
   <tr>
    <td><code>farthest-corner</code></td>
    <td>渐变的边缘形状与容器距离渐变中心点最远的一个角相交。</td>
   </tr>
  </tbody>
 </table>

 <div class="note">
 <p><strong>提示:</strong> 早期的草案中还包含其他关键字(<code>cover</code> and <code>contain</code>) ，分别相当于标准关键字 <span class="st"><code>farthest-corner</code></span> 和 <code>closest-side</code>,。但因为在某些实现中丢弃了这些旧的关键字，所以请仅使用标准关键字。</p>
 </div>
 </dd>
 <dt><code>&lt;color-stop&gt;</code></dt>
 <dd>表示某个确定位置的固定色值，包含一个<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value" title="CSS 数据类型 &lt;color> 表示一种标准RGB色彩空间（sRGB color space）的颜色。一种颜色可以用以下任意的方式来描述："><code>&lt;color&gt;</code></a>值加上可选的位置值（相对虚拟渐变射线的<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/percentage" title="CSS 数据类型 &lt;percentage> 表述一个百分比值。许多 CSS 属性 可以取百分比值，经常用以根据父对象来确定大小。Percentages are formed by a &lt;number> immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn't a space between the '%' and the number."><code>&lt;percentage&gt;</code></a>或者<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/length" title="是表示距离尺寸的一种css数据格式。它由一个 &lt;number> 后紧随一个长度单位（px，em，pt，in，mm，...）组成。和任何 CSS 尺寸一样，数字和单位之间没有空格。&lt;number> 0之后的长度单位是可选的。"><code>&lt;length&gt;</code></a>长度值）。 百分比值<code>0%</code>，或者长度值<code>0</code>，表示渐变中心点；百分比值<code>100%</code>表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。</dd>
</dl>

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

<pre class="syntaxbox notranslate">repeating-radial-gradient(
       [[ circle  || <a href="/en-US/docs/CSS/length">&lt;length&gt;</a> ]                     [at <a href="/en-US/docs/Web/CSS/position_value">&lt;position&gt;</a>]? , |
        [ ellipse || [<a href="/en-US/docs/CSS/length">&lt;length&gt;</a> | <a href="/en-US/docs/CSS/percentage">&lt;percentage&gt;</a> ]{2}] [at <a href="/en-US/docs/Web/CSS/position_value">&lt;position&gt;</a>]? , |
        [[ circle | ellipse ] || &lt;extent-keyword&gt; ] [at <a href="/en-US/docs/Web/CSS/position_value">&lt;position&gt;</a>]? , |
                                                     at <a href="/en-US/docs/Web/CSS/position_value">&lt;position&gt;</a>   ,    &lt;color-stop&gt; [ , &lt;color-stop&gt; ]+ )
        \---------------------------------------------------------------/\--------------------------------/
                  定义轮廓、尺寸和结束形状的位置                                    色标列表

where &lt;extent-keyword&gt; = closest-corner | closest-side | farthest-corner | farthest-side
  and<code> &lt;color-stop&gt; = &lt;color&gt; [ &lt;percentage&gt; | &lt;length&gt; ]?</code></pre>

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

<p>径向渐变沿着一条轴线进行渲染。在每个轴线的端点处可以指定一个半径。可以想象为创建了两个“圆”，每个圆的中心位置用点指定，大小由半径值指定。渐变从内圆的圆周向外延伸到外圆的圆周。</p>

<h3 id="黑白相间的渐变">黑白相间的渐变</h3>


<pre class="brush: css notranslate" class="hidden">div {
  display: block;
  width: 50%;
  height: 80px;
  border-color: #000000;
  padding: 10px;
}
#grad1 {
  background: -webkit-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
  background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
  background: -ms-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
  background: -o-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
  text-shadow: 1px 1px 0pt black;
  color: white;
  border: 1px solid black;
  height:5.5em;
}
</pre>

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

<pre class="brush: css notranslate">background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);</pre>

<h3 id="Farthest-corner渐变">Farthest-corner渐变</h3>


<pre class="brush: css notranslate" class="hidden">div {
  display: block;
  width: 50%;
  height: 80px;
  border-radius: 10px;
  border-color: #000000;
  padding: 10px;
}
#grad1 {
  background: -webkit-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
  background: -moz-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
  background: -ms-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
  background: -o-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
  background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
  text-shadow: 1px 1px 0pt blue;
  color: white;
  border: 1px solid black;
  height:5.5em;
}
</pre>

<p>{{EmbedLiveSample('Farthest-corner', '300px', '120px', '')}}</p>

<pre class="brush: css notranslate">background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);</pre>

<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-radial-gradient()')}}</td>
   <td>{{Spec2('CSS3 Images')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

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

{{Compat("css.types.image.gradient.repeating-radial-gradient")}}

<h2 id="参阅：">参阅：</h2>

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