radial-gradient()

/* 在容器中心的渐变，从红色开始，变成蓝色，最后变成绿色 */
radial-gradient(circle at center, red 0, blue, green 100%)

径向渐变通过指定渐变的中心（0% 椭圆所在的位置）和结束形状（100% 椭圆）的大小和形状来指定。

<position>

<position> 与 background-position 或者 transform-origin 类似。如果没有指定，默认为中心点。

<ending-shape>

渐变结束时的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对称椭圆）。默认值为椭圆。

<size>

确定渐变结束形状的大小。如果省略，则默认为最远角。它可以显式给出，也可以通过关键字给出。出于关键字定义的目的，将梯度框边缘视为在两个方向上无限延伸，而不是有限线段。

对于它们的 <size>，圆形和椭圆渐变都接受以下关键字：

关键字	描述
closest-side	渐变结束的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
closest-corner	渐变结束的边缘形状与容器距离渐变中心点最近的一个角相交。
farthest-side	与 closest-side 相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
farthest-corner	渐变结束的边缘形状与容器距离渐变中心点最远的一个角相交。

如果 <ending-shape> 被指定为圆形，则可以为大小指定一个 <length>，它明确了圆的半径。

如果 <ending-shape> 被指定为椭圆，或者被忽略，则可以使用<length-percentage> 用两个值来指定椭圆的大小。第一个值表示水平半径，第二个值表示垂直半径。百分比值是相对于渐变框的相应尺寸的。负值无效。

<linear-color-stop>

色值结束点（color stop）的 <color> 值，后跟一个或两个可选的停止位置（沿渐变轴的 <percentage> 或 <length>）。0% 的百分比，或者 0 的长度，代表渐变的中心；值 100% 表示结束形状与虚拟渐变射线的交点。两者之间的百分比值线性定位在梯度射线上。包括两个停止位置相当于在两个位置声明了两个颜色相同的色值结束点。

<color-hint>

color-hint 是一个插值提示，定义了相邻色标之间的渐变如何进行。长度定义了两种颜色之间的哪个点渐变颜色应该到达颜色过渡的中点。如果省略，颜色过渡的中点是两个色值结束点之间的中点。

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

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

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

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

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

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

<radial-gradient()> = 
  radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )  

<size> = 
  <extent-keyword>              |
  <length [0,∞]>                |
  <length-percentage [0,∞]>{2}  

<position> = 
  [ left | center | right ] || [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<color-stop-list> = 
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#  

<extent-keyword> = 
  closest-corner   |
  closest-side     |
  farthest-corner  |
  farthest-side    

<length-percentage> = 
  <length>      |
  <percentage>  

<linear-color-stop> = 
  <color>               &&
  <length-percentage>?  

<linear-color-hint> = 
  <length-percentage>  

请参见 CSS 渐变获取更多示例。

• CSS 渐变
• 其他的渐变函数：repeating-radial-gradient (en-US)、linear-gradient (en-US)、repeating-linear-gradient (en-US)、conic-gradient (en-US)、repeating-conic-gradient (en-US)
• <image>
• image() (en-US)
• element
• image-set() (en-US)
• cross-fade (en-US)