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
182
183
|
---
title: radial-gradient()
slug: Web/CSS/radial-gradient()
translation_of: Web/CSS/radial-gradient()
---
<div>{{CSSRef}}</div>
<p>CSS radial-gradient() 函數創建了一個圖片，其由一個從原點輻射開的在兩個或者多個顏色之前的漸變組成。這個方法得到的是一個CSS<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/gradient" title="The <gradient> CSS data type is a special type of <image> that consists of a progressive transition between two or more colors."><code><gradient></code></a>數據類型的物件，其是 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/image" title="The <image> CSS data type represents a two-dimensional image. There are two kinds of images: plain images, referenced with a <url>, and dynamically-generated images, generated with <gradient> or element(). Additional CSS image functions include image(), image-set(), and cross-fade(). Images can be used with numerous CSS properties, such as background-image, border-image, content, cursor, and list-style-image."><code><image></code></a> 的一種。</p>
<div>{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}</div>
<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
<p>As with any gradient, a radial gradient has <a href="/en-US/docs/CSS/image#no_intrinsic">no intrinsic dimensions</a>; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.</p>
<p>To create a radial gradient that repeats so as to fill its container, use the {{cssxref("repeating-radial-gradient")}} function instead.</p>
<p>Because <code><gradient></code>s belong to the <code><image></code> data type, they can only be used where <code><image></code>s can be used. For this reason, <code>radial-gradient()</code> won't work on {{Cssxref("background-color")}} and other properties that use the {{cssxref("<color>")}} data type.</p>
<h2 id="Composition_of_a_radial_gradient">Composition of a radial gradient</h2>
<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">向量漸變(Radial gradients)由其中心點、邊緣形狀輪廓及位置、色值結束點（color stops）定義而成。</p>
<p>To create a smooth gradient, the <code>radial-gradient()</code> function draws a series of concentric shapes radiating out from the center to the <em>ending shape</em> (and potentially beyond). The ending shape may be either a circle or an ellipse.</p>
<p>Color-stop points are positioned on a <em>virtual gradient ray</em> that extends horizontally from the center towards the right. Percentage-based color-stop positions are relative to the intersection between the ending shape and this gradient ray, which represents <code>100%</code>. Each shape is a single color determined by the color on the gradient ray it intersects.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="brush: css no-line-numbers notranslate">/* 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%)</pre>
<h3 id="Values">Values</h3>
<dl>
<dt>{{cssxref("<position>")}}</dt>
<dd>The position of the gradient, interpreted in the same way as {{cssxref("background-position")}} or {{cssxref("transform-origin")}}. If unspecified, it defaults to <code>center</code>.</dd>
<dt><code><shape></code></dt>
<dd>The gradient's shape. The value can be <code>circle</code> (meaning that the gradient's shape is a circle with constant radius) or <code>ellipse</code> (meaning that the shape is an axis-aligned ellipse). If unspecified, it defaults to <code>ellipse</code>.</dd>
<dt><code><extent-keyword></code></dt>
<dd>A keyword describing how big the ending shape must be. The possible values are:
<table class="standard-table">
<thead>
<tr>
<th>Keyword</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>closest-side</code></td>
<td>The gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses).</td>
</tr>
<tr>
<td><code>closest-corner</code></td>
<td>The gradient's ending shape is sized so that it exactly meets the closest corner of the box from its center.</td>
</tr>
<tr>
<td><code>farthest-side</code></td>
<td>Similar to <code>closest-side</code>, except the ending shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides).</td>
</tr>
<tr>
<td><code>farthest-corner</code></td>
<td>The default value, the gradient's ending shape is sized so that it exactly meets the farthest corner of the box from its center.</td>
</tr>
</tbody>
</table>
<div class="note">
<p><strong>Note:</strong> Early implementations of this function included other keywords (<code>cover</code> and <code>contain</code>) as synonyms of the standard <code>farthest-corner</code> and <code>closest-side</code>, respectively. Use the standard keywords only, as some implementations have already dropped those older variants.</p>
</div>
</dd>
<dt><code><linear-color-stop></code></dt>
<dd>A color-stop's {{cssxref("<color>")}} value, followed by an one or two optional stop positions (either a {{cssxref("<percentage>")}} or a {{cssxref("<length>")}} 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><color-hint></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>
</dl>
<h3 id="Formal_syntax">Formal syntax</h3>
<pre class="syntaxbox notranslate">radial-gradient(
[ [ circle || <a href="/en-US/docs/CSS/length"><length></a> ] [ at <a href="/en-US/docs/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/CSS/position_value"><position></a> ]? , |
[ [ circle | ellipse ] || <extent-keyword> ] [at <a href="/en-US/docs/CSS/position_value"><position></a> ]? , |
at <a href="/en-US/docs/CSS/position_value"><position></a> ,
]?
<color-stop-list> [ , <color-stop-list> ]+
)
where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
and <linear-color-stop> = <color> [ <color-stop-length> ]?
and <color-stop-length> = [ <percentage> | <length> ]{1,2}
and <color-hint> = [ <percentage> | <length> ]
</pre>
<div class="blockIndicator warning">
<p>Note that negative <code><length></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>
<h2 id="Examples">Examples</h2>
<h3 id="Simple_gradient">Simple gradient</h3>
<div class="hidden">
<pre class="brush: html notranslate"><div class="radial-gradient"></div>
</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"><div class="radial-gradient"></div>
</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="Specifications">Specifications</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="Browser_compatibility">Browser compatibility</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="See_also">See also</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("<image>")}}</li>
<li>{{cssxref("_image","image()")}}</li>
<li>{{cssxref("element()")}}</li>
<li>{{cssxref("image-set","image-set()")}}</li>
<li>{{cssxref("cross-fade")}}</li>
</ul>
|
