发光渐变按钮需分层实现：径向渐变（circle at center）打底，多层rgba box-shadow塑形，伪元素（撑大+负偏移）补光晕；任一环节缺失会导致偏光、发虚或错位。
发光渐变按钮不是靠一层 background 或一个 box-shadow 就能搞定的，必须分层控制：径向渐变打底 + 多层阴影塑形 + 伪元素补光晕。漏掉任一环节，要么像贴了层白纸，要么边缘发虚、缩放错位、移动端失效。
radial-gradient 必须显式写 at center 和 circle
默认 radial-gradient(#fff, transparent) 是按 ellipse at farthest-corner 渲染的——按钮一不是正方形，光晕立刻拉成椭圆，看起来偏光、不对称。真正“由内而外”的发光，得强制居中且等比例扩散：
-
radial-gradient(circle at center, #ffffff 0%, transparent 70%)—— 圆心锁定，尺寸约束，过渡点设在 70% 防止光晕太窄或发虚 - 宽高不等时改用
closest-side：例如radial-gradient(closest-side at center, #fff, transparent)，自动取最短边为半径，避免裁剪 - 千万别写成
radial-gradient(center, circle, ...)——at是关键字，漏了整个声明无效，浏览器静默忽略 - 所有径向渐变层都必须加
no-repeat / 100% 100%，否则 flex 布局或缩放时会平铺或错位
box-shadow 要叠 2–3 层，且必须用 rgba()
单层 box-shadow: 0 0 20px #0af 是硬光，没有呼吸感；不用透明度就无法模拟光晕的“胀缩”。水母式呼吸效果依赖 alpha 和模糊值同步变化：
- 推荐三层叠加：
0 0 10px rgba(120, 180, 255, 0.6)（内层微光）+0 0 25px rgba(80, 140, 255, 0.3)（中层主晕）+0 0 45px rgba(40, 80, 220, 0.15)（外层衰减） - 动画里只动每层的 alpha 值和模糊半径，不要动 opacity——它会压暗整个按钮，破坏发光逻辑
- 禁用
filter: blur()模拟光晕：Safari 和旧 Chrome 容易抖动，且无法独立控制软硬边缘 - IE11 不支持
rgba()在box-shadow中的 alpha 通道，降级方案是用hsla()或十六进制带透明度写法（如#00f8）
伪元素光晕必须略大于容器并负偏移
直接让 ::before 设 width: 100%; height: 100%; top: 0; left: 0，光晕会被按钮自身裁剪（尤其用了 border-radius 或 overflow: hidden 时）。要撑开发光范围：
立即学习“前端免费学习笔记（深入）”；
-
::before尺寸设为width: calc(100% + 0.5em); height: calc(100% + 0.5em)，再用top: -0.25em; left: -0.25em居中负偏移 - 务必同步设置相同
border-radius，否则圆角处漏光 -
z-index必须错开：主体按钮z-index: 1，::beforez-index: 0，::afterz-index: -1，否则遮盖文字或点击区域 - 移动端需加
will-change: box-shadow（仅限动画元素），否则 iOS Safari 可能降级渲染
背景色适配比参数更重要
同一套 box-shadow 参数，在深色背景上炫酷，在白色背景上可能完全不可见。这不是调参问题，是设计前提没对齐：
- 上线前必须在
background-color: #000和background-color: #fff下分别测试，调整rgba()的明度与模糊半径 - 渐变背景色相若从蓝到青，阴影色也要分层对应：内层用
#00aaff，外层过渡到#00ffff，不能全塞蓝色系 - 别迷信“看起来亮就行”——人眼对光晕软硬度极其敏感，模糊值差 5px、透明度差 10%，质感就断层
最常被忽略的是：所有层（径向渐变、多层阴影、伪元素）必须共用一套尺寸基准和定位逻辑，否则缩放、悬停、移动端触摸时，光晕会错位、断裂、卡顿。这不是细节，是发光能否成立的前提。
