合格霓虹按钮的关键在于正确组织多层box-shadow与text-shadow：必须用逗号分隔同一条声明、共用偏移值、按外虚内实排序，文字需不透明且font-weight≥700，动画应预定义@keyframes并启用GPU加速，深色模式下需单独调整模糊半径与饱和度。
直接用 box-shadow 多层叠加 + text-shadow 配合就能做出合格的霓虹按钮，但多数人卡在光晕错位、动画卡顿或深色模式下失效——核心不是加多少层阴影，而是怎么组织它们。
box-shadow 多层写法必须用逗号分隔，不能重复声明
常见错误是把多层阴影拆成多个 box-shadow 声明，结果只有最后一层生效。浏览器只认最后一个同名属性，前面的全被覆盖。
- ❌ 错误写法：
box-shadow: 0 0 5px #0ff; box-shadow: 0 0 15px #0ff; - ✅ 正确写法：
box-shadow: 0 0 5px #0ff, 0 0 15px #0ff, 0 0 30px rgba(0, 255, 255, 0.6); - 所有层必须共用相同偏移值（如都用
0 0），否则会错位，失去“同心发光”感 - 顺序影响视觉层级：靠前的阴影更外层、更虚，靠后的更内层、更实
text-shadow 必须和 box-shadow 对齐，且文字颜色不能透明
只给容器加光晕，文字边缘还是硬的；真实霓虹是字本身在发光。但 text-shadow 容易糊成一团，关键在控制透明度与模糊梯度。
- 文字
color必须设为不透明浅色，比如color: rgba(255, 255, 255, 0.95)，transparent或纯黑底上没设 color 就看不到光 -
text-shadow层数建议 3–4 层，模糊值比box-shadow小 2–3px，例如：text-shadow: 0 0 3px #0ff, 0 0 8px #0ff, 0 0 15px rgba(0, 100, 255, 0.7); - 父容器不能有
overflow: hidden，否则光晕被裁掉，只剩中间一块亮斑 - 字体要粗（
font-weight: 700）+ 无衬线（font-family: sans-serif），细体撑不起光效
动画卡顿？别直接 transition box-shadow
对大模糊值的 box-shadow 做 transition，浏览器要实时重绘大片透明区域，低端设备直接掉帧。真正稳定的方案是预定义动画 + 硬件加速。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 用
@keyframes写循环动画，而不是 hover 里改box-shadow值 - 给按钮加
transform: translateZ(0)强制 GPU 加速，比will-change: box-shadow更稳妥 - 避免在
:hover或:active中修改box-shadow，否则动画计时器重置，光效突然跳变 - 移动端点按时系统
:active态会抢走box-shadow控制权，推荐把动画绑定到::after伪元素上，按钮本体只处理点击逻辑
深色模式下霓虹发灰？关键在对比度和模糊衰减
同一套动画在白底上耀眼，在黑底上可能糊成一团——不是颜色不够亮，而是最外层光晕太扩散，吞噬了按钮轮廓。
- 用
@media (prefers-color-scheme: dark)单独覆盖@keyframes，不要靠 JS 检测，减少渲染延迟 - 深色模式下调小最外层
box-shadow模糊半径，比如从30px改为20px - 主发光色饱和度提高 10–15%，比如浅蓝
rgb(135, 206, 250)在深色背景下显灰，换成rgb(100, 180, 255) - 避免用
hsl()或命名色，统一用rgba()，防止不同引擎解析色相偏移
真正难调的不是让光动起来，而是让各层 box-shadow 的衰减曲线匹配人眼暂留特性——盯着看 10 秒，如果觉得刺眼或发虚，该调的是透明度和模糊值，不是加更多颜色层。
