radial-gradient() 的默认行为易致色块偏移或截断，需显式声明形状、尺寸、位置等参数；推荐用 circle at center 避免中心漂移，全背景用 farthest-corner，控件内嵌用 closest-side；多色停止点须带单位，透明叠加顺序影响最终效果。
径向渐变不是“从中心发散的颜色圆”那么简单——radial-gradient() 的默认行为常让人误以为它总以元素中心为起点、等比扩散，实际它的形状、尺寸、位置全由参数隐式决定，稍不注意就会出现色块偏移、渐变截断或意外拉伸。
radial-gradient() 的三个必填参数：形状、尺寸、颜色停止点
很多人写 radial-gradient(red, blue) 就跑，结果发现渐变边缘生硬、中心偏左上角。这是因为省略所有可选参数时，浏览器按以下默认值补全：
- 形状（shape）：默认
ellipse（椭圆），不是circle - 尺寸（size）：默认
farthest-corner，即渐变终点延伸到离中心最远的角——对非正方形容器，这会导致横向/纵向拉伸感明显 - 位置（position）：默认
center center，但若父容器有transform或direction: rtl，可能被意外影响
更稳妥的写法是显式声明关键参数：radial-gradient(circle at center, #ff9a9e, #fad0c4)。其中 circle 强制等宽高，at center 明确锚点，避免响应式布局下因盒模型变化导致中心漂移。
尺寸关键词 farthest-side 和 closest-side 的真实表现差异
这两个常被教程混用，但它们在不同宽高比容器中效果迥异：
-
farthest-side：渐变终点停在「离中心最远的那条边」。在宽屏容器中，它常让水平方向铺满、垂直方向留白；在窄高容器中则相反 -
closest-side：终点停在「离中心最近的那条边」。适合做小范围聚焦效果（如按钮悬停光晕），但若容器太小，可能整个渐变缩成一团色斑
实测建议：做全背景渐变时优先用 farthest-corner（兼容性好、视觉饱满）；做控件内嵌渐变时改用 closest-side 并配合 padding 控制呼吸感。
多色停止点与透明度叠加的常见陷阱
加透明色（如 rgba(255,0,0,0.3)）本意是做柔和过渡，但容易忽略两点：
- 停止点位置未归一化：写成
radial-gradient(red 0%, transparent 50%, blue 100%)是安全的；但若漏掉百分比单位（如red 0），部分旧版 Safari 会解析失败 - 透明叠加顺序影响最终色：CSS 渐变是「从后往前叠」，所以
radial-gradient(white, rgba(0,0,0,0.2))实际是白底上叠半透黑，而非黑底透出白——想实现「暗角」效果，得把深色放前面：radial-gradient(black, transparent)
调试技巧：临时加一层 background-color: #fff 在渐变下方，能快速判断透明层是否真的生效。
兼容性与性能提醒：不要在伪元素里滥用 radial-gradient
虽然 ::before/::after 常被用来叠加渐变蒙版，但要注意：
- IE11 及更早版本不支持
radial-gradient()，需配filter: progid:DXImageTransform.Microsoft.gradient(...)（已基本弃用） - 在
position: fixed或频繁滚动的容器中，含radial-gradient的伪元素可能触发重绘（尤其搭配transform: scale()动画时），FPS 明显下降 - 若只是简单中心高亮，用
box-shadow: 0 0 60px 20px rgba(0,0,0,0.1)替代，性能更好、代码更轻
真正需要精确控制径向衰减（比如数据可视化热力图、玻璃态毛玻璃背景）时，才值得引入 radial-gradient 并仔细调参——其他多数场景，它只是个“看起来高级但容易翻车”的装饰性工具。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
