diff options
Diffstat (limited to 'files/zh-cn/web/css/gradient/repeating-radial-gradient/index.html')
| -rw-r--r-- | files/zh-cn/web/css/gradient/repeating-radial-gradient/index.html | 182 |
1 files changed, 182 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/gradient/repeating-radial-gradient/index.html b/files/zh-cn/web/css/gradient/repeating-radial-gradient/index.html new file mode 100644 index 0000000000..13e90c5381 --- /dev/null +++ b/files/zh-cn/web/css/gradient/repeating-radial-gradient/index.html @@ -0,0 +1,182 @@ +--- +title: repeating-radial-gradient() +slug: Web/CSS/gradient/repeating-radial-gradient +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Gradients + - Graphics + - Layout + - Reference + - Web +translation_of: Web/CSS/gradient/repeating-radial-gradient() +original_slug: Web/CSS/gradient/repeating-radial-gradient() +browser-compat: css.types.image.gradient.repeating-radial-gradient +--- +<div>{{CSSRef}}</div> + +<p>CSS函数<strong><code>repeating-radial-gradient()</code></strong> 创建一个从原点辐射的重复渐变组成的{{cssxref("<image>")}} 。它类似于{{cssxref("radial-gradient")}} 并且采用相同的参数，但是它会在所有方向上重复颜色，以覆盖其整个容器。函数的结果是 {{cssxref("<gradient>")}} 数据类型的对象， 是一种特殊的{{cssxref("<image>")}}类型。</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><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>{{cssxref("<position>")}}</dt> + <dd><code>position</code>与 {{cssxref("background-position")}} 或者 {{cssxref("transform-origin")}}类似。默认值为 <code>center</code>.</dd> + <dt>{{cssxref("<angle>")}}</dt> + <dd>渐变轴的角度。角度顺时针增加，默认值为<code>0deg</code>。</dd> + <dt>{{cssxref("<shape>")}}</dt> + <dd>渐变的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对称椭圆）。默认值为椭圆。默认值为椭圆形，即 <code>ellipse</code>。</dd> + <dt><code><extent-keyword></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><color-stop></code></dt> + <dd>表示某个确定位置的固定色值，包含一个<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value" title="CSS 数据类型 <color> 表示一种标准RGB色彩空间（sRGB color space）的颜色。一种颜色可以用以下任意的方式来描述："><code><color></code></a>值加上可选的位置值（相对虚拟渐变射线的<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/percentage" title="CSS 数据类型 <percentage> 表述一个百分比值。许多 CSS 属性 可以取百分比值，经常用以根据父对象来确定大小。Percentages are formed by a <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><percentage></code></a>或者<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/length" title="是表示距离尺寸的一种css数据格式。它由一个 <number> 后紧随一个长度单位（px，em，pt，in，mm，...）组成。和任何 CSS 尺寸一样，数字和单位之间没有空格。<number> 0之后的长度单位是可选的。"><code><length></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"><length></a> ] [at <a href="/en-US/docs/Web/CSS/position_value"><position></a>]? , | + [ ellipse || [<a href="/en-US/docs/CSS/length"><length></a> | <a href="/en-US/docs/CSS/percentage"><percentage></a> ]{2}] [at <a href="/en-US/docs/Web/CSS/position_value"><position></a>]? , | + [[ circle | ellipse ] || <extent-keyword> ] [at <a href="/en-US/docs/Web/CSS/position_value"><position></a>]? , | + at <a href="/en-US/docs/Web/CSS/position_value"><position></a> , <color-stop> [ , <color-stop> ]+ ) + \---------------------------------------------------------------/\--------------------------------/ + 定义轮廓、尺寸和结束形状的位置 色标列表 + +where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side + and<code> <color-stop> = <color> [ <percentage> | <length> ]?</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> |