radial-gradient()

CSS radial-gradient()方法创建一个<image>，用来展示由原点（渐变中心）辐射开的颜色渐变。这个方法得到的是一个CSS<gradient>数据类型的对象。

径向渐变(Radial gradients)由其中心点、边缘形状轮廓及位置、色值结束点（color stops）定义而成。  径向渐变的中心点至边缘形状以及其延伸的部分，由连续缩放的若干同心轮廓组成，这个轮廓由设定的边缘形状决定。色值结束点用于设定虚拟渐变射线（virtual gradient ray）的变化方式，由中心点水平变化至右侧（如图）。色值结束点由百分比设定时，则是相对于终点为渐变射线与边缘形状相交点的渐变半径，渐变半径的终点位置即为100%。每个轮廓均为纯色，颜色由渐变射线上相应横切点所定义的颜色决定。

边缘形状只能为圆形或者椭圆形

与其他渐变相同，CSS径向渐变不属于CSS <color>数据类型，而是一个不固定尺寸的图片，譬如，它没有默认尺寸、比例。具体尺寸由它所定义的元素尺寸决定。

radial-gradient方法不允许循环渐变。如需要循环渐变，请使用CSS的repeating-radial-gradient 方法。

语法

Formal grammar: radial-gradient( [ circle || <length> ] [ at <position> ]? ,
| [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? ,
| [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? ,
| at <position> ,
<color-stop> [ , <color-stop> ]+ )
\------------------------------------------------------------------------------/\--------------------------------/ 

// Definition of the contour, size and position of the ending shape List of color stops 
where 
<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side 
and 
<color-stop> = <color> [ <percentage> | <length> ]? 

// Definition of the ending shape 
radial-gradient( circle, … ) /* Synonym of radial-gradient( circle farthest-corner, …) */ 
radial-gradient( ellipse, … ) /* Synonym of radial-gradient( ellipse farthest-corner, …) */ 
radial-gradient( <extent-keyword>, … ) /* It draws a circle */ 
radial-gradient( circle radius, … ) /* A centered circle of the given length. It can't be a percentage */ 
radial-gradient( ellipse x-axis y-axis, … ) /* The two semi-major axis are given, horizontal, then vertical */ 

// Definition of the position of the shape 
radial-gradient (… at <position>, … ) 

// Definition of the color stops 
radial-gradient (…, <color-stop>) 
radial-gradient (…, <color-stop>, <color-stop>) 

值

<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	渐变的边缘形状与容器距离渐变中心点最远的一个角相交。

Early drafts included other keywords (cover and contain) as synonyms of the standard farthest-corner and closest-side respectively. Use the standard keywords only, as some implementations have already dropped those older variants.

Examples

background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);

background-image: radial-gradient(ellipse farthest-corner at 470px 47px , #FFFF80 20%, rgba(204, 153, 153, 0.4) 30%, #E6E6FF 60%);

background-image: radial-gradient(farthest-corner at 45px 45px , #FF0000 0%, #0000FF 100%);

background-image: radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);

规范

浏览器兼容性

^[1] Internet Explorer 5.5 through 9.0 supports proprietary filter: progid:DXImageTransform.Microsoft.Gradient() filter.

^[2] WebKit since 528 supports the legacy -webkit-gradient(radial,…) function. See also their current support for radial gradients.

^[3] Firefox 3.6 and Webkit implemented, prefixed, an early syntax.

^[4]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.

See also

• Using CSS gradients, repeating-radial-gradient, linear-gradient
• WebKit's original proposal: https://webkit.org/blog/175/introducing-css-gradients/
• WebKit's new implementation: https://webkit.org/blog/1424/css3-gradients/