径向渐变

径向渐变就是从一个点开始向外扩展为一个圆形或者椭圆，因此，径向渐变首先需要确定一个中心点，然后是大小和形状。径向渐变的颜色节点同线性渐变一样，是一个颜色列表。下面是径向渐变的语法：

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

• []：表示可选；
• |：或，表示多个选择其一；
• ?：表示重复0次或多次；
• {2}：重复两次；
• +：重复1次或多次。

下面是径向渐变的一个例子：

background: radial-gradient(5em circle at top left, yellow, blue);

下面是我们来具体看看radial-gradient的参数的含义。

shape

shape可以是"circle"或"ellipse"，决定了径向渐变最终形成的形状。如果该值被忽略，则存在：1）size为单个长度值，则shape为"circle"；2）否则为"ellipse"。

size

决定渐变的大小。可以指定的具体的数值或者使用常量，circle和ellipse都支持的常量如下：

closest-side

从渐变的中心出发到最近的一条边的距离作为渐变的大小。如果是椭圆，则以两个方向的最短距离为准。

圆椭圆farthest-side

和closest-side类似，但是基于最远的边。

圆椭圆closest-corner

从渐变的中心出发到最近的一条角的距离作为渐变的大小。如果是椭圆，渐变的大小的横宽比例同指定"closest-side"时的横宽比例。

圆椭圆farthest-corner

和closest-corner类似，但是基于最远的角。如果是椭圆，渐变的大小的横宽比例同指定"farthest-side"时的横宽比例。

圆椭圆

除了使用以上的常量，size也可以指定精确值。如果shape被忽略，或者指定为circle，则size可以设置为：

<length>

length为单个数字，指定圆的半径。不允许负值。

如果shape被忽略，或者指定为ellipse，则size可以设置为：

[ <length> | <percentage> ]{2}

length为数字，percentage指定百分比，2个数值分别指定椭圆的宽和高。不允许负值。

position

决定渐变的中心。定义方法为：

x, y

x可选值：percentage、length、left、center、right；

y可选值：percentage、length、top 、center、bottom ；

如果忽略该值，则使用默认值center。

颜色节点（color-stop）

颜色节点放置在渐变线上，渐变线从渐变的中心开始向右扩展。0%位于渐变线的起点，100%位于渐变线的终点（与渐变边界相交）。颜色节点值可以为负，虽然渐变线的负值区域不能直接呈现，但却可能影响到非负区域的颜色。颜色节点的使用方法同线性渐变。

径向渐变实例

下面通过一些具体的例子来看径向渐变的效果：

径向渐变

以下三种方式都能达到上面的效果：

background: radial-gradient(#ff58bc, #00702c);

radial-gradient(ellipse at center, #ff58bc 0%, #00702c 100%);

radial-gradient(farthest-corner at 50% 50%, #ff58bc, #00702c);

径向渐变

background: radial-gradient(circle, #ff58bc, #00702c);

径向渐变

background: radial-gradient(farthest-side at left bottom, #ff58bc, #ffe509 50px, #00702c)

径向渐变

以下两种方式都能达到上面的效果：

background: radial-gradient(closest-side at 20px 30px, #ff58bc, #ffe509, #00702c)

background: radial-gradient(20px 30px at 20px 30px, #ff58bc, #ffe509, #00702c)

径向渐变

以下两种方式都能达到上面的效果：

background: radial-gradient(closest-side circle at 20px 30px, #ff58bc, #ffe509, #00702c)

background: radial-gradient(20px 20px at 20px 30px, #ff58bc, #ffe509, #00702c)