先记住这个答案
radial-gradient 的第一个参数控制渐变的形状和大小。ellipse 画椭圆，会根据容器宽高比自动拉伸；circle 画正圆，宽高比再怎么变都是圆的。渐变中心用 at x y 指定，大小用四个关键字或具体半径值来控制。不写形状时默认 ellipse，不写位置时默认在正中心。
- 默认
ellipse会受容器比例影响 circle强制正圆，只接受一个半径值at 30% 70%把渐变中心移到容器内任意位置closest-side等控制渐变覆盖范围
circle 和 ellipse 的实际差异
在一个正方形容器里，两者看起来一样。但一旦容器变成长方形，区别就明显了。ellipse 的两个半径分别沿水平和垂直方向拉伸，渐变边缘会跟着容器变扁或变长。circle 的半径只有一个，无论容器什么比例，渐变永远是正圆。
/* 容器是 300x150 的长方形 */
.ellipse-bg {
/* 默认 ellipse，渐变边缘是椭圆 */
background: radial-gradient(ellipse at center, #f06 0%, #fff 100%);
}
.circle-bg {
/* 强制正圆，多出来的区域被最外层颜色填满 */
background: radial-gradient(circle at center, #f06 0%, #fff 100%);
}ellipse 的渐变会铺满整个容器，而 circle 在短边方向可能提前结束，剩下的区域被最后一个色标的颜色填充。所以如果你希望渐变「刚好铺满」，在非正方形容器里用 ellipse 更合适。
四个大小关键字怎么选
渐变的大小决定了色标 100% 的位置在哪里。浏览器提供了四个关键字，不用自己算像素。
closest-side 让渐变边缘刚好碰到最近的那条边。farthest-side 碰到最远的边。closest-corner 碰到最近的角。farthest-corner 碰到最远的角，这也是默认值。
.small {
/* 渐变只到最近的边，范围最小 */
background: radial-gradient(circle closest-side at 30% 30%, #f06, #fff);
}
.large {
/* 渐变延伸到最远的角，范围最大 */
background: radial-gradient(circle farthest-corner at 30% 30%, #f06, #fff);
}这里把圆心放在 at 30% 30% 的位置。closest-side 的渐变半径很短，因为到最近那条边的距离只有容器宽度的 30%。farthest-corner 的半径会很长，要一直延伸到对角。
选哪个取决于你的设计意图：做聚光灯效果用 closest-side，做大面积光晕用 farthest-corner。
容易答错的地方
- 给
circle写两个半径值 circle只接受一个半径，写成circle 50px 80px浏览器会直接忽略整条background声明，页面上什么都看不到，也不会在控制台报错。需要两个半径就用ellipse。- 以为
at后面只能写百分比 at后面可以写百分比、像素、top、right这些关键字，也可以混着用，比如at 20px bottom。百分比是相对容器宽高的，像素是绝对值。
面试官还会怎么问？
怎么用径向渐变画一个同心圆靶心图案？
把多个色标写在同一个位置就能产生硬边。比如 radial-gradient(circle, red 20%, white 20% 40%, red 40% 60%, white 60%) 会画出红白交替的同心圆环。
radial-gradient 能做动画吗？
可以，但性能一般。渐变不能像 transform 那样走 GPU 合成层，每帧都要重新绘制。如果只是改颜色或位置，可以用 CSS 自定义属性配合 @property 注册为可插值类型，让浏览器平滑过渡。
repeating-radial-gradient 和 radial-gradient 有什么区别？
repeating-radial-gradient 会把你定义的色标序列无限重复下去，适合做条纹、波纹等重复图案。普通的 radial-gradient 在最后一个色标之后就停了，剩余区域用最后一个颜色填满。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。