理解CSS径向渐变radial-gradient
径向渐变
径向渐变就是椭圆渐变，圆是椭圆的特殊形式，径向渐变从圆心点以椭圆的形式向外扩散，渐变的实现由两部分组成：椭圆和色标，椭圆控制渐变的位置、大小和形状；色标控制渐变的颜色和位置。
语法： radial-gradient([[shape|<size>]? [at <position>,]]? <color-stop>[,<color-stop>]+)
演示效果
椭圆
影响椭圆的参数有<position>, <shape>, <size>，分别控制椭圆的圆心、形状和大小
position
<position>: x轴 y轴
x轴:<length> | <percentage> | left | center | right
y轴:<length> | <percentage> | top | center | bottom
关键字是百分比的特殊表现形式
left -> 0% center -> 50% right -> 100%
top: -> 0% center -> 50% right -> 100%
例2演示了left center关键字的效果
当属性值为数值时，x轴数值表示圆心在x轴上距离0点（渐变框左上角）的偏移量，y轴数值表示圆心在y轴上距离0点的偏移量。
例3演示了数值效果
当属性值为百分比时，x轴数值相对于渐变框宽度，y轴数值相对于渐变框高度。
例4演示了百分比效果
当属性值只有一个值时，第二值默认center
shape
shape定义渐变的形状是圆circle还是椭圆ellipse，默认值椭圆。
例5和例6演示了圆形和椭圆形渐变效果
size
size定义渐变的大小，默认值farthest-corner。
size为关键字
closest-side:半径为从圆心到最近边
closest-corner:半径为从圆心到最近角
farthest-side:半径为从圆心到最远边
farthest-corner:半径为从圆心到最远角
例7到例10演示了四个属性值的效果，下面一张图解释了四个属性值所代表的具体含义
size为数值
如果只有一个值时，渐变是圆形的，size值可以是length，表示渐变的半径，不能是百分比，因为浏览器不知道百分比是相对于渐变框的宽度还是高度
如果有两个值时，渐变是椭圆的，表示渐变的水平半径和垂直半径，size值可以是length或百分比，百分比相对于渐变框的宽高。
色标
色标在上一篇文章理解CSS线性渐变linear-gradient中已介绍，径向渐变的色标与之类似，不同的是当渐变不能充满整个渐变框时，浏览器使用最后一种色标的颜色填充剩余区域。
重复渐变(repeating-radial-gradient)
例13演示了重复渐变
上面说过浏览器会使用色标的最后一种颜色填充未充满渐变的区域，但是当使用重复渐变时，浏览器会使用渐变填充未充满渐变的区域
