radial-gradient()

翻译不完整。 请帮助我们翻译这篇文章!

CSS radial-gradient() 函数创建了一个图片,其由一个从原点辐射开的在两个或者多个颜色之前的渐变组成。这个方法得到的是一个CSS<gradient>数据类型的对象,其是 <image> 的一种。

与其他渐变相同,径向渐变是一个不固定尺寸的图片,譬如,它没有默认尺寸、比例。具体尺寸由它所定义的元素尺寸决定。

如需要填充容器的循环渐变,请使用CSS的repeating-radial-gradient 方法。

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

radial gradient 的组成

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

径向渐变的中心点至边缘形状以及其延伸的部分,由连续缩放的若干同心轮廓组成,这个轮廓由设定的边缘形状决定。

色值结束点用于设定虚拟渐变射线(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 No support NoFirefox 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 No support NoFirefox 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 YesSafari 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.

另见