最直接纯CSS霓虹发光按钮用多层box-shadow叠加实现：外发光靠0偏移+逐级增大模糊值与渐深颜色（如#00f3ff→#0033aa），内发光加inset阴影；需统一文字与按钮主色、控制text-shadow层级、适配触屏（:focus-within或@media）、限制阴影≤6层防性能问题。
用 box-shadow 模拟霓虹发光效果最直接
纯 CSS 实现悬浮发光按钮，核心不是渐变或滤镜，而是多层 box-shadow 叠加。浏览器渲染快、兼容性好（Chrome/Firefox/Safari/Edge 均支持），且无需 JS 干预。
关键点在于：外发光靠 box-shadow 的模糊半径和透明度控制，内发光可叠加一层 inset 阴影；颜色选高饱和蓝、紫、青（如 #00f3ff）更接近霓虹感。
示例基础写法：
.neon-btn {
background: #0a0a1a;
color: #00f3ff;
border: 2px solid #00f3ff;
padding: 12px 24px;
font-weight: bold;
transition: all 0.3s ease;
}
.neon-btn:hover {
box-shadow:
0 0 5px #00f3ff,
0 0 10px #00f3ff,
0 0 15px #0066ff,
0 0 20px #0066ff,
0 0 25px #0033aa,
0 0 30px #0033aa;
}
注意：所有 box-shadow 的 x、y 偏移必须为 0，否则会偏移出光晕中心；模糊值逐级增大，颜色由亮到深，模拟光散射衰减。
避免 text-shadow 单独发光导致文字糊成一团
只给文字加 text-shadow 容易让字形边缘发虚、辨识度下降，尤其小字号或粗体时。真正耐看的霓虹按钮，是「按钮整体发光」，文字只是其中一部分。
如果仍想强化文字光效，应配合按钮阴影使用，且控制层级：
-
text-shadow最多设 2–3 层，模糊值 ≤ 8px，避免过度扩散 - 颜色必须与
box-shadow主色调一致，否则出现色边（如按钮主光是青色，文字阴影也用#00f3ff，别混入粉或黄） - 务必设置
backdrop-filter: blur(1px)或轻微background-color透底，防止文字在强光下“消失”于背景
移动端 hover 失效？用 :focus-within 或媒体查询兜底
手机和平板没有“悬停”概念，:hover 在触摸设备上基本不触发（iOS Safari 尤其严格）。不能只依赖 :hover。
可行方案：
- 对触屏设备，改用
:focus-within+tabindex="0"，让用户点击后保持焦点发光（适合表单类按钮） - 用
@media (hover: hover) and (pointer: fine)区分精细指针设备，只对鼠标用户启用:hover动画 - 更稳妥的做法：默认状态就带微弱发光（比如
box-shadow: 0 0 2px #0066ff），悬停时增强——这样无论是否 hover 都有基础霓虹感
性能隐患：别堆超过 6 层 box-shadow
每多一层 box-shadow 都增加合成层计算量，尤其在低端安卓机或旧版 Safari 上，8 层以上可能引发掉帧或闪烁。
实测安全阈值：
- 常规按钮（宽 ≤ 200px）：≤ 6 层
box-shadow，总模糊值 ≤ 30px，流畅无压力 - 动画中动态增减阴影（如 hover 进出）比静态多层更耗性能，优先用
transition控制 opacity 或 blur，而非增删 shadow 列表 - 若需更强光效，宁可用
filter: drop-shadow()替代部分box-shadow，但注意它不支持inset，且 IE 完全不支持
真正难的不是写出光，而是让光稳定亮在各种屏幕和交互路径里——阴影层数、颜色衰减节奏、触控 fallback，漏掉哪一环，霓虹就容易变成闪烁故障灯。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
