目录

(一)、语法简化的语法如下：<extent-keyword> circle | ellipse 都接受该值作为size （二）、例子例子1例子2例子3例子4例子5例子6

(一)、语法

radial-gradient( [[ circle || <length > ]　　　　[ at <position> ]?, | [ ellipse || [ <length> ]{2} ]　　　[ at <position> ]?,| [[ circle | ellipse ] || <extent-keyword> ]　　[ at <position> ]? ,| at <position> ,]? <color-stop> [,<color-stop> ] + ）

  这是一种正则表达式，大家可以去搜索一下各个符号代表的意思。总的来说，符号?表示前面由[]括起来的字符串可以出现0或1次；符号+表示前面由[]括起来的字符串可以出现1或多次；符号|代表或的意思，即左右字符串二选一；符号||应该按照无关事件来理解，即左字符串是否存在对右字符串没有影响，即左右字符串是无关的。最后大家要理清楚上述公式的层次结构。

简化的语法如下：

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

<shape>: 定义径向渐变的形状，包括circle(圆)和ellipse(椭圆),默认值为ellipse. <size>: 定义圆的半径或者椭圆的轴长度，有三种情形。第一种情形是使用<extent-keyword>进行声明，默认为farthest-corner；第二种情形是当shape为circle时，通过使用px等长度单位来声明径向渐变圆的半径；第三种情形是当shape为ellipse时，通过使用两个长度单位来分别声明径向渐变椭圆的长半轴和短半轴。

at <position>: 定义渐变的起始点，取值包含数值、百分比，也可以使用关键字。其中left、center和right关键字用于定义x轴坐标，top、center、bottom用于定义y轴坐标，如：at left top 将渐变中心定于左上角。当只指定一个值时，另一个值默认为center。 <color-stop>: 色标，由颜色和步长组成，这个容易懂，不细讲。

<extent-keyword> circle | ellipse 都接受该值作为size

值描述closest-side指定径向渐变的半径长度为从圆心到离圆心最近的边的长度(circle)或分别将水平方向渐变中心到最近的边的长度和垂直方向渐变中心到最近的边的长度指定为椭圆的水平半轴和垂直半轴（ellipse)farthest-side指定径向渐变的半径长度为从圆心到离圆心最远的边的长度(circle)或分别将水平方向渐变中心到最远的边的长度和垂直方向渐变中心到最远的边的长度指定为椭圆的水平半轴和垂直半轴(ellipse)closest-corner指定渐变的半径长度为从圆形到离圆心最近的角的长度(circle)或渐变的边缘形状与容器距离渐变中心点最近的一个角相交，且椭圆的宽高比与closest-side的相同farthest-corner指定径向渐变的半径长度为从圆心到离圆心最远的角的长度(circle)或渐变的边缘形状与容器距离渐变中心点最远的一个角相交，且椭圆的宽高比与farthest-side的相同 根据网上所说，<extent-keyword>除了包含上面四个值外，还包含contain和cover两个值。但因为好像浏览器都不兼容这两个值，所以没能验证contain和cover的具体作用。 contain： 包含，指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-side。 cover： 覆盖，指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-corner （存在疑虑，对于shape设置为ellipse时，contain和cover是否仍分别类同于closest-side和farthest-side?)

（二）、例子

例子1

radial-gradient(circle 100px at 0% 50%, yellow, #009966, purple);

将渐变中心定在容器的左边的中间位置，渐变圆的半径设置为100px，

例子2

radial-gradient(ellipse 200px 100px at 25% 50%, yellow, #009966, purple);

如果是设置椭圆形的渐变尺寸，则需要给出两个长度：第一个指定水平方向的尺寸，即水平半轴为200px，第二个指定垂直方向的尺寸，即垂直半轴为100px。

例子3

radial-gradient( ellipse closest-side at 50px 50px, yellow 70%,blue 70%);

因为水平半轴和垂直半轴均为50px，虽然shape设置为ellipse,但最终呈现出的渐变形状仍为正圆。

例子4

radial-gradient( ellipse farthest-side at 300px 0px, yellow 70%,blue 70%);

渐变中心被设置在上边框的中间位置，根据farthest-side的用法规则，此时椭圆的水平半轴和垂直半轴均为300px，则最终呈现效果仍为正圆。

例子5

radial-gradient( ellipse closest-corner at 50px 50px, yellow 90%,blue 90%);

渐变中心在(50px,50px)处，经分析得，此时离渐变中心最近的顶角为左上顶角，故渐变边缘形状经过左上顶角，且宽高比例与closest-side相同，此时仍为正圆。

例子6

radial-gradient( ellipse farthest-corner at 300px 0px, yellow 40%,blue 40%);

渐变中心在(300px,0px)处，根据farthest-corner用法规则，则渐变边缘应该经过边框下面的两个顶角，且椭圆的宽高比与farthest-side相同，所以此时呈现的仍为正圆。 其他用法比较容易，就不展示了，可以查看其他人写的技术博客，比如各种色标的分配问题。