CSS 径向渐变

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

属性解析：

        ending-shape ：渐变结束的形状 默认为椭圆ellipse，可以设置为圆形circle

        size：渐变结束形状的大小；默认为最远角

size的值：相较于渐变中心点

        closest-side: 与容器最近的一条边相切

        closest-corner：与容器最近的一个角相交

        farthest-side： 与容器最远的一条边相切

        farthest-corner: 与容器最远的一个角相交

        一个数字：如果ending-shape指定为圆形时，此值表示半径

        两个百分比：ending-shape省略时，表示椭圆的大小，第一个水平半径，第二个垂直半径

       

        position：径向渐变开始的位置，默认是中心点

x/y的坐标

一个值：center、top、 left、bottom、right（另一个纬度默认为50%）

两个值：一个是x坐标，一个是y坐标，可以是关键词，可以像素数，可以是百分比

        注意：

        1. 只要是left、right就是指定x坐标，top、bottom是指定y坐标，位置不固定

        2. 如果是百分比或数字，则第一个是x 第二个是y

        3. 如果两个都是数字或百分比，则按照顺序分别为 x或者y

三个值：

        1. 前两个值是关键字时，第三个是偏移量

        2. 如果第二个值是数字或百分比，则它是第一个值的偏移量，如果是第三个值，则是第二个值的偏移量

        3. 一个关键字+2个数字或百分比的组合是无效的

四个值：第一个和第三个是定义xy的关键词，第二个和第四个是偏移量

       linear-color-stop: 颜色及结束位置

        多个颜色之间用逗号隔开

示例：

1. background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c); 

 2. background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);

3. background: radial-gradient(ellipse at top, #e66465, transparent), radial-gradient(ellipse at bottom, #4d9f0c, transparent);