radial-gradient 默认显示为椭圆是因为其默认形状是 ellipse 而非 circle，需显式声明 circle 才能实现圆形渐变；“扩散”效果由中心位置、形状和尺寸共同决定，单位选择上像素最稳定，vmax 次之，百分比易失控。
radial-gradient 的基础写法为什么总显示成椭圆？
因为默认形状是 ellipse，不是 circle。只要没显式声明，浏览器就按容器宽高比拉伸渐变，宽高不等时必然变椭圆。
- 必须写
radial-gradient(circle, ...)才能强制圆形 - 如果只写
radial-gradient(...)，等价于radial-gradient(ellipse, ...) - 旧写法
-webkit-radial-gradient已废弃，现代项目别用
示例：一个居中、半径 100px 的红色到透明圆形扩散背景：
background: radial-gradient(circle at center, red, transparent 100px);
“扩散”效果的关键参数是位置和尺寸
所谓“扩散”，本质是控制渐变中心点位置 + 透明色停止位置。中心偏移或半径过大，都会让扩散看起来不对劲。
-
at center是默认值，可省略；但写明更易读 -
at 50% 50%和at center等效，但前者兼容性略好（IE10+） - 第二个颜色停止位置（如
transparent 80px）决定“扩散边界”，数值越大扩散越远 - 若用百分比（如
transparent 50%），实际半径按容器对角线长度算，容易失控
常见错误：radial-gradient(circle, #fff, transparent 100%) —— 百分比在窄容器里会缩成一个小点，在宽屏上又糊满全屏。
立即学习“前端免费学习笔记（深入）”；
性能与兼容性：别在大范围元素上无脑用高斯模糊式渐变
纯 radial-gradient 本身性能很好，但有人会叠加 filter: blur() 模拟柔边，这就危险了。
- 带
blur()的渐变背景在滚动或动画时极易掉帧，尤其移动端 - IE 完全不支持
radial-gradient（包括所有前缀），需要 fallback 颜色 - Firefox 对
closest-side/farthest-corner等关键字支持不稳定，建议坚持用circle+ 像素值
稳妥写法（含降级）：
background: #f0f0f0;<br>background: radial-gradient(circle at center, #f0f0f0, transparent 120px);
如何让扩散随容器大小自适应又不失控？
用 vmax 单位比百分比更可控：它取视口宽高中的较大值，避免在超宽屏或超窄屏上失衡。
-
10vmax≈ 视口较长边的 10%，扩散范围始终协调 - 配合
background-size: 200% 200%+background-position: center可实现“呼吸感”动效（需配合 transition） - 绝对不要用
100vw/100vh——滚动条会干扰计算，导致扩散错位
自适应示例（适合全屏背景）：
background: radial-gradient(circle at center, rgba(255,255,255,0.8), transparent 30vmax);CSS 径向渐变的“扩散”不是特效开关，而是中心点、形状、尺寸三者咬合的结果。最容易被忽略的是单位选择——像素值最稳，
vmax 次之，百分比和视口单位在复杂布局里容易悄悄跑偏。 
