radial-gradient()

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

与其它渐变相同,径向渐变是一个不固定尺寸的图像,即,它没有首选的大小,也没有首选的比例。具体大小将由它所应用的元素的大小决定。

如要创建重复的径向渐变来填充容器,请使用CSS的repeating-radial-gradient 方法。

因为 <gradient> 属于 <image> 类型,所以它可以用于任何适用于 <image> 的地方。正是因为这样,radial-gradient() 不能用于 background-color 和其他属性比如 <color> 数据类型。

radial gradient 的组成

径向渐变(Radial gradients)由其中心点边缘形状轮廓、两个或多个色值结束点(color stops)定义而成。  

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

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

语法

/* 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%)

<position>
<position>background-position或者transform-origin类似。如缺省,默认为中心点。
<shape>
渐变的形状。圆形(渐变的形状是一个半径不变的正圆)或椭圆形(轴对称椭圆)。默认值为椭圆。
<size>
渐变的尺寸大小。包含的值见下表尺寸常数表
<color-stop>
表示某个确定位置的固定色值,包含一个<color>值加上可选的位置值(相对虚拟渐变射线的<percentage>或者<length>长度值)。 百分比值0%,或者长度值0,表示渐变中心点;百分比值100%表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。
<extent-keyword>
关键字用于描述边缘轮廓的具体位置。以下为关键字常量:
常量 描述
closest-side 渐变的边缘形状与容器距离渐变中心点最近的一边相切(圆形)或者至少与距离渐变中心点最近的垂直和水平边相切(椭圆)。
closest-corner 渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
farthest-side 与closest-side相反,边缘形状与容器距离渐变中心点最远的一边相切(或最远的垂直和水平边)。
farthest-corner 渐变的边缘形状与容器距离渐变中心点最远的一个角相交。

注意:该函数的早期实现还包含其他关键字( covercontain),分别相当于标准关键字 farthest-corner 和 closest-side 。但因为在某些实现中丢弃了这些旧的关键字,所以请仅使用标准关键字。

<linear-color-stop>
A color-stop's <color> value, followed by an one or two optional stop positions (either a <percentage> or a <length> along the gradient's axis). A percentage of 0%, or a length of 0, represents the center of the gradient; the value 100% 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.
<color-hint>
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.

Formal syntax

radial-gradient(
  [ [ circle || <length> ]                         [ at <position> ]? , |
    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
    [ [ circle | ellipse ] || <extent-keyword> ] [at <position> ]? , |
    at <position> ,
  ]?
  <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> ]

Note that negative <length>'s are not allowed, however browsers had implemented negative lengths which are now being removed. See the Firefox site compat note.

示例

Simple gradient

.radial-gradient {
  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
} 

Non-centered gradient

.radial-gradient {
  background-image: radial-gradient(farthest-corner at 40px 40px,
      #f35 0%, #43e 100%);
}

Note: Please see Using CSS gradients for more examples.

规范

Specification Status Comment
CSS Images Module Level 3
radial-gradients()
Candidate Recommendation Initial definition.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
radial-gradient()Chrome Full support 26
Full support 26
Full support 13
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 16
Notes
Full support 16
Notes
Notes Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Full support 3.6
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 10
Notes
Full support 10
Notes
Notes Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: -ms-filter: progid:DXImageTransform.Microsoft.Gradient().
Opera Full support 12.1
Full support 12.1
No support 11.6 — 15
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Full support 6.1
Full support 6.1
Full support 5.1
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Safari 4 was supporting an experimental -webkit-gradient(radial,…) function. This old outdated syntax is still supported for compatibility purposes.
WebView Android Full support ≤37
Full support ≤37
Full support ≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 26
Full support 26
Full support 18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 16
Notes
Full support 16
Notes
Notes Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Full support 4
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 12.1
Full support 12.1
No support 12 — 14
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Full support 6.1
Full support 6.1
Full support 6
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Safari 4 was supporting an experimental -webkit-gradient(radial,…) function. This old outdated syntax is still supported for compatibility purposes.
Samsung Internet Android Full support 1.5
Full support 1.5
Full support 1.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
at syntaxChrome Full support 26Edge Full support 12Firefox Full support 16
Notes
Full support 16
Notes
Notes Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Full support 10
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 10Opera Full support 15
Full support 15
No support 11.6 — 15
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari No support NoWebView Android Full support ≤37Chrome Android Full support 26Firefox Android Full support 16
Full support 16
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Opera Android Full support 14
Full support 14
No support 12 — 14
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari iOS No support NoSamsung Internet Android Full support 1.5
Double-position color stopsChrome Full support 71Edge Full support 79Firefox Full support 64IE No support NoOpera Full support 58Safari Full support 12.1WebView Android Full support 71Chrome Android Full support 71Firefox Android Full support 64Opera Android Full support 50Safari iOS Full support 12.2Samsung Internet Android Full support 10.0
Interpolation Hints / Gradient MidpointsChrome Full support 40Edge Full support 79Firefox Full support 36IE No support NoOpera Full support 27Safari Full support 6.1WebView Android Full support 40Chrome Android Full support 40Firefox Android Full support 36Opera Android Full support 27Safari iOS Full support 6.1Samsung Internet Android Full support 4.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

Quantum CSS notes

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

另见