radial-gradient()的前世今生

1、radial-gradient() 原理

CSS radial-gradient()函数创建一个由原点（渐变中心）辐射开的颜色渐变的图片，边缘形状只能为为circle或者ellipse，其结果属于<gradient>数据类型，是一种特别的<image>数据类型。

径向渐变（radial-gradient）由其中心点、边缘形状轮廓及位置、色值的结束点（color-stop）定义。

为了创建平滑的渐变，radial-gradient()函数从中心点到边缘形状以及其延伸部分，是由一系列同心轮廓构成，这个形状由有设定的边缘形状决定。

色值结束点用于设定虚拟渐变射线（virtual gradient ray）的变化方式，由中心点水平变化至右侧（如图）。色值结束点由百分比设定时，则是相对于终点为渐变射线和边缘形状相交点的渐变半径，渐变点半径的终点位置即为100%，每个轮廓均为纯色，颜色由渐变射线上相应横切点所定义的颜色决定。

2、语法

radial-gradient(circle at center, red 0, blue, green 100%)
/* 从元素中心点渐变,起始色为red，渐变到blue，终止色为green*/

形式语法

radial-gradient(
  [ [ circle || <length> ]                         [ at <position> ]? , |
    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
    [ [ circle | ellipse ] || <extent-keyword> ]   [ at <position> ]? , |
    at <position> ,
  ]?
  <color-stop> [ , <color-stop> ]+
)
where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
  and <color-stop>     = <color> [ <percentage> | <length> ]? 

即

background: radial-gradient(shape extend-keyword at position, start-color, ..., last-color);

值

<position>
渐变的<position> ，与background-position或者transform-origin类似。如果缺省，则默认为center。

<shape>
渐变的<shape>，圆形（渐变的形状是一个形状不变的正圆）或者椭圆形（周堆成椭圆）。默认值是椭圆。

<extend-keyword> 即size
渐变的尺寸大小。包含值如下&