diff options
author | MDN <actions@users.noreply.github.com> | 2021-06-19 00:34:51 +0000 |
---|---|---|
committer | MDN <actions@users.noreply.github.com> | 2021-06-19 00:34:51 +0000 |
commit | ef6dc2f07bcc7d47193d4d4110e32f8eb87b369b (patch) | |
tree | 03e6f19fc527ab750be01344add09afba6bcb6dd /files/zh-cn/web/css/repeating-radial-gradient() | |
parent | 3e028982e4bc6762a47268f86fe395670a11c160 (diff) | |
download | translated-content-ef6dc2f07bcc7d47193d4d4110e32f8eb87b369b.tar.gz translated-content-ef6dc2f07bcc7d47193d4d4110e32f8eb87b369b.tar.bz2 translated-content-ef6dc2f07bcc7d47193d4d4110e32f8eb87b369b.zip |
[CRON] sync translated content
Diffstat (limited to 'files/zh-cn/web/css/repeating-radial-gradient()')
-rw-r--r-- | files/zh-cn/web/css/repeating-radial-gradient()/index.html | 262 |
1 files changed, 0 insertions, 262 deletions
diff --git a/files/zh-cn/web/css/repeating-radial-gradient()/index.html b/files/zh-cn/web/css/repeating-radial-gradient()/index.html deleted file mode 100644 index 94cf5f2d19..0000000000 --- a/files/zh-cn/web/css/repeating-radial-gradient()/index.html +++ /dev/null @@ -1,262 +0,0 @@ ---- -title: repeating-radial-gradient() -slug: Web/CSS/repeating-radial-gradient() -translation_of: Web/CSS/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> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}})</td> - <td>10 {{property_prefix("-webkit")}}</td> - <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}<br> - {{CompatGeckoDesktop("16")}}<sup>[1]</sup></td> - <td>10</td> - <td>12 {{property_prefix("-o")}}<br> - 12.5</td> - <td>5.1 {{property_prefix("-webkit")}}</td> - </tr> - <tr> - <td>On {{cssxref("border-image")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("29")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>On any other property that accept {{cssxref("<image>")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Interpolation hints (a percent without a color)</td> - <td>40</td> - <td>{{CompatGeckoDesktop("36")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}})</td> - <td>4.4</td> - <td>{{CompatGeckoMobile("46")}}</td> - <td>10</td> - <td>12.1</td> - <td>7.1</td> - </tr> - <tr> - <td>On {{cssxref("border-image")}}</td> - <td>{{CompatGeckoMobile("29")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>On any other property that accept {{cssxref("<image>")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Before Firefox 36, Gecko didn't apply gradient on the pre-multiplied color space, leading to shade of grey unexpectedly appearing when used with transparency. Since Firefox 42, the prefixed version of gradients can be disabled by setting <code>layout.css.prefixes.gradients</code> to <code>false</code>.</p> - -<p>In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit</code> prefixed version of the function for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p> - -<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> |