path: root/files/zh-cn/web/css/gradient/radial-gradient()/index.html

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

<p> <code>radial-gradient()</code> CSS函数创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成。它的形状可以是圆形（circle）或椭圆形（ellipse）。这个方法得到的是一个CSS{{cssxref("&lt;gradient&gt;")}}数据类型的对象，其是 {{cssxref("&lt;image&gt;")}} 的一种。</p>

<p>{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}</p>

<p>与其它渐变相同，径向渐变是一个<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image#no_intrinsic">不固定尺寸</a>的图像，即，它没有首选的大小，也没有首选的比例。具体大小将由它所应用的元素的大小决定。</p>

<p>如要创建重复的径向渐变来填充容器，请使用CSS的{{ Cssxref("repeating-radial-gradient") }} 方法。</p>

<p>因为 <code>&lt;gradient&gt;</code> 属于 <code>&lt;image&gt;</code> 类型，所以它可以用于任何适用于 <code>&lt;image&gt;</code> 的地方。正是因为这样，<code>radial-gradient()</code> 不能用于 {{Cssxref("background-color")}} 和其他属性比如 {{cssxref("&lt;color&gt;")}} 数据类型。</p>

<h2 id="radial_gradient_的组成">radial gradient 的组成</h2>

<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">径向渐变(Radial gradients)由其<em>中心点</em>、<em>边缘形状</em>轮廓、<em>两个或多个色值结束点（color stops）</em>定义而成。  </p>

<p>为了创建平滑的渐变，径向渐变函数绘制了一系列从中心点放射到边缘形状（甚至可能超出范围）的同心轮廓。边缘形状可以是圆形（circle）或椭圆形（ellipse）。</p>

<p>色彩结束点位于虚拟渐变射线（Virtual gradient ray）上，该渐变射线从中心点水平向右延伸。 基于百分比的色彩结束位置是相对于边缘形状和此渐变射线之间的交点（代表100％）。 每个形状都是一种单色，并由其相交的渐变射线上的颜色确定。</p>

<h2 id="语法">语法</h2>

<pre class="notranslate"><code>/* A gradient at the center of its container,
   starting red, changing to blue, and finishing green */
radial-gradient(circle at center, red 0, blue, green 100%)</code></pre>

<h3 id="值">值</h3>

<dl>
 <dt><code>{{cssxref("&lt;position&gt;")}}</code></dt>
 <dd>{{ cssxref("&lt;position&gt;") }}与{{ Cssxref("background-position") }}或者{{ Cssxref("transform-origin") }}类似。如缺省，默认为中心点。</dd>
 <dt><code>&lt;shape&gt;</code></dt>
 <dd>渐变的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对称椭圆）。默认值为椭圆。</dd>
 <dt><code>&lt;size&gt;</code></dt>
 <dd>渐变的尺寸大小。包含的值见下表{{ anch("尺寸常数表") }}。</dd>
 <dt><code>&lt;color-stop&gt;</code></dt>
 <dd>表示某个确定位置的固定色值，包含一个{{cssxref("&lt;color&gt;")}}值加上可选的位置值（相对虚拟渐变射线的{{cssxref("&lt;percentage&gt;")}}或者{{cssxref("&lt;length&gt;")}}长度值）。 百分比值<code>0%</code>，或者长度值<code>0</code>，表示渐变中心点；百分比值<code>100%</code>表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。</dd>
 <dt><code>&lt;extent-keyword&gt;</code></dt>
 <dd>关键字用于描述边缘轮廓的具体位置。以下为关键字常量：</dd>
 <dd>
 <table class="standard-table">
  <tbody>
   <tr>
    <th>常量</th>
    <th>描述</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>与closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。</td>
   </tr>
   <tr>
    <td><code>farthest-corner</code></td>
    <td>渐变的边缘形状与容器距离渐变中心点最远的一个角相交。</td>
   </tr>
  </tbody>
 </table>

 <div class="blockIndicator note">
 <p>注意：该函数的早期实现还包含其他关键字（ <code>cover</code> 和 <code>contain</code>），分别相当于标准关键字 <span class="st"><code>farthest-corner</code></span> 和 <code>closest-side</code> 。但因为在某些实现中丢弃了这些旧的关键字，所以请仅使用标准关键字。</p>
 </div>
 </dd>
 <dt><code>&lt;linear-color-stop&gt;</code></dt>
 <dd>A color-stop's {{cssxref("&lt;color&gt;")}} value, followed by an one or two optional stop positions (either a {{cssxref("&lt;percentage&gt;")}} or a {{cssxref("&lt;length&gt;")}} along the gradient's axis). A percentage of <code>0%</code>, or a length of <code>0</code>, represents the center of the gradient; the value <code>100%</code> represents the intersection of the ending shape with the virtual gradient ray. Percentage values in between are linearly positioned on the gradient ray. Including two stop positions is equivalent to declaring two color stops with the same color at the two positions.</dd>
 <dt><code>&lt;color-hint&gt;</code></dt>
 <dd>Th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.</dd>
 <dt>
 <h3 id="Formal_syntax">Formal syntax</h3>

 <pre class="notranslate">radial-gradient(
  [ [ circle || <a href="https://wiki.developer.mozilla.org/en-US/docs/CSS/length">&lt;length&gt;</a> ]                         [ at <a href="https://wiki.developer.mozilla.org/en-US/docs/CSS/position_value">&lt;position&gt;</a> ]? , |
    [ ellipse || [ <a href="https://wiki.developer.mozilla.org/en-US/docs/CSS/length">&lt;length&gt;</a> | <a href="https://wiki.developer.mozilla.org/en-US/docs/CSS/percentage">&lt;percentage&gt;</a> ]{2} ]  [ at <a href="https://wiki.developer.mozilla.org/en-US/docs/CSS/position_value">&lt;position&gt;</a> ]? , |
    [ [ circle | ellipse ] || &lt;extent-keyword&gt; ] [at <a href="https://wiki.developer.mozilla.org/en-US/docs/CSS/position_value">&lt;position&gt;</a> ]? , |
    at <a href="https://wiki.developer.mozilla.org/en-US/docs/CSS/position_value">&lt;position&gt;</a> ,
  ]?
  &lt;color-stop-list&gt; [ , &lt;color-stop-list&gt; ]+
)
where &lt;extent-keyword&gt; = closest-corner | closest-side | farthest-corner | farthest-side
   and &lt;color-stop-list&gt; = [ &lt;linear-color-stop&gt; [, &lt;color-hint&gt;? ]? ]#, &lt;linear-color-stop&gt;
   and &lt;linear-color-stop&gt; = &lt;color&gt; [ &lt;color-stop-length&gt; ]?
   and &lt;color-stop-length&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]{1,2}
   and &lt;color-hint&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]
</pre>

 <div class="blockIndicator warning">
 <p>Note that negative <code>&lt;length&gt;</code>'s are not allowed, however browsers had implemented negative lengths which are now being removed. <a href="https://www.fxsitecompat.dev/en-CA/docs/2019/css-radial-gradients-no-longer-accept-negative-radii/">See the Firefox site compat note</a>.</p>
 </div>
 </dt>
</dl>

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

<h3 id="Simple_gradient">Simple gradient</h3>

<div class="hidden">
<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
</pre>

<pre class="brush: css notranslate">.radial-gradient {
  width: 240px;
  height: 120px;
}</pre>
</div>

<pre class="brush: css notranslate">.radial-gradient {
  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
} </pre>

<p>{{EmbedLiveSample('Simple_gradient', 120, 120)}}</p>

<h3 id="Non-centered_gradient">Non-centered gradient</h3>

<div class="hidden">
<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
</pre>

<pre class="brush: css notranslate">.radial-gradient {
  width: 240px;
  height: 120px;
}</pre>
</div>

<pre class="brush: css notranslate">.radial-gradient {
  background-image: radial-gradient(farthest-corner at 40px 40px,
      #f35 0%, #43e 100%);
}</pre>

<p>{{EmbedLiveSample('Non-centered_gradient', 240, 120)}}</p>

<div class="note">
<p><strong>Note:</strong> Please see <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Using CSS gradients</a> for more examples.</p>
</div>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}</td>
   <td>{{Spec2('CSS3 Images')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

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



<div>{{Compat("css.types.image.gradient.radial-gradient")}}</div>

<h3 id="Quantum_CSS_notes">Quantum CSS notes</h3>

<p>Gecko used to have a long-standing bug whereby radial gradients like <code>radial-gradient(circle gold,red)</code> would work, even though they shouldn't because of the missing comma between <code>circle</code> and <code>gold</code>. Also, {{cssxref("calc")}} expressions were rejected — causing the value to be invalid — when used as the radius component of a <code>radial-gradient()</code> function ({{bug(1376019)}}). Firefox's new parallel CSS engine (also known as <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> or <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, released in Firefox 57) fixed these bugs.</p>

<h2 id="另见">另见</h2>

<ul>
 <li><a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Using CSS gradients</a></li>
 <li>Other gradient functions: {{cssxref("repeating-radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-conic-gradient")}}</li>
 <li>{{cssxref("&lt;image&gt;")}}</li>
 <li>{{cssxref("_image","image()")}}</li>
 <li>{{cssxref("element()")}}</li>
 <li>{{cssxref("image-set","image-set()")}}</li>
 <li>{{cssxref("cross-fade")}}</li>
</ul>