radial-gradient() 用来生成径向渐变的图片
基础语法
background-image: radial-gradient(shape extent at positionX positionY,colorStop positionStrop,colorStrop_2 positonStop_2,……)
参数说明
备注： 如果有多个关键点 原则上 后面点的位置需要 > 前面点的位置实例效果
shape == circle 效果
为了强化区别 渐变背限制在非常狭小的范围
background-image: radial-gradient( circle closest-side at 50% 50%, #fff 0%, red 85%, blue 100%);
shape == ellipse 效果
为了强化区别 渐变背限制在非常狭小的范围
background-image: radial-gradient(ellipse closest-side at 50% 50%, #fff 0%, red 85%, blue 100% );
background-image: radial-gradient(ellipse closest-side at 30% 30%, #fff 0%, red 85%,blue 100%);
以上 两个径向渐变的唯一区别就是 圆心的位置，从中可以看到 ellipse 形状的渐变，比例是同容器的比例相同的；
extent 定义边缘的位置关键字
extent == farthest-side 效果
background-image: radial-gradient(ellipse farthest-side at 30% 30%, #fff 0%, red 85%, blue 100%);
extent == farthest-corner 效果
background-image: radial-gradient(ellipse farthest-corner at 30% 30%, #fff 0%, red 85%, blue 100%);
extent == closest-side 效果
background-image: radial-gradient(ellipse closest-side at 30% 30%, #fff 0%, red 85%,blue 100%);
extent == closest-corner 效果
background-image: radial-gradient(ellipse closest-corner at 30% 30%, #fff 0%, red 85%, blue 100%);
以上4个径向渐变的区别就是 extent 参数变化[决定了渐变的边缘也就是 关键点位置是100%的位置 ]；这个位置同 容器的尺寸共同定义到了椭圆形渐变的范围；
关键点：
1： 渐变形状的比例 同容器的比例相同
2：extent 定义了渐变的边缘位置
farthest-side == 边缘同容器的最远边相切
farthest-corner == 边缘同容器的最远角相交；
closet-side == 边缘同容器的最近边相切；
closet-corner == 边缘同容器的最近交相交；
positionStop 参数 > 100% 的情况
background-image: radial-gradient(ellipse farthest-corner at 30% 30%, red 0%,blue 150%);
在这种情况之下 容器的背景图片没有出现 == blue 的情况；
相关内容：
CSS 背景色 背景图片 渐变背景 - 线性渐变 background:linear-gradient()
CSS 背景色 背景图片 渐变背景 - 重复线性渐变 background-image: repeating-linear-gradient()
