光晕被裁掉是因为父容器设置了 overflow: hidden 或隐式裁剪；应提级到 body 下动态定位，或用伪元素+transform居中并适配 DPR。
absolute定位大圆光晕时，为什么光晕总被裁掉？
因为父容器没设 overflow: visible，或者父元素本身是 overflow: hidden（比如常见于卡片、按钮、模态框容器），导致超出部分直接被剪裁。光晕本质是大尺寸+高模糊的 box-shadow 或伪元素 ::before 圆，一旦父级有隐藏策略，再大的 z-index 也救不回来。
- 检查父级是否隐式设置了
overflow: hidden（Bootstrap 的.card、Ant Design 的Card、或自定义的border-radius+overflow: hidden组合） - 临时加
overflow: visible !important测试是否恢复显示——如果恢复了，就确认是裁剪问题 - 更稳妥的做法：把光晕元素提级到
body下，用 JS 动态计算位置并挂载，避开父级限制
用 box-shadow 还是伪元素画大圆光晕？
box-shadow 写法快，但模糊半径受浏览器渲染限制，超过 200px 后边缘易发虚、色阶断层；伪元素（::before）可控性更强，能自由设 filter: blur() + opacity，兼容性也够（Chrome 52+/Firefox 52+/Safari 9.1+）。
-
box-shadow: 0 0 120px 40px rgba(139, 92, 246, 0.3)—— 简单，但 iOS Safari 对超大blur渲染不稳定 - 伪元素方案必须配
position: absolute+top: 50%+left: 50%+transform: translate(-50%, -50%)居中，否则偏移难控 - 伪元素的
width/height建议设为视口宽度的 150%～200%，比如width: 300vw; height: 300vw;，再靠transform锚定中心点
absolute 定位光晕时，top/left 值该填多少？
填固定像素值（比如 top: 20px; left: 30px）只适用于静态布局；真实场景中，光晕要随目标元素移动或缩放，必须用相对锚点 + 动态计算。
- 如果目标元素有
position: relative，光晕元素设position: absolute后，top: 0; left: 0;就对齐左上角——但光晕中心通常要对齐目标中心 - 正确做法：光晕元素设
top: 50%; left: 50%，再加transform: translate(-50%, -50%)把自身中心对准父级中心 - 若目标元素尺寸动态变化（如响应式按钮），需监听
resize或用ResizeObserver重算光晕尺寸，否则模糊圈会错位或拉伸
blur(80px) 在不同设备上看起来不一样，怎么稳住效果？
不是参数写错了，是 CSS filter: blur() 的实际渲染强度受设备像素比（DPR）和浏览器光栅化策略影响。同一 blur(60px) 在 MacBook Pro（DPR=2）上比在普通 Windows 笔记本（DPR=1）上看起来更“厚”、更弥散。
立即学习“前端免费学习笔记（深入）”；
- 避免硬写大数值，优先用
blur(30px)+ 提高opacity（比如0.4）模拟更浓效果，比直接blur(100px)更可控 - 移动端 Safari 对大
blur有性能警告，可能降帧或禁用，可加will-change: filter提前提示，但别滥用 - 测试时务必在真机（尤其 iPhone）上验证，模拟器常高估模糊强度
