最稳霓虹灯效果用多层text-shadow：内层白光小模糊，外层主色大模糊；注意统一px单位、控制层数、深色背景加锐化；drop-shadow更贴合字体轮廓但不可逐层调色。
用 text-shadow 实现基础霓虹灯效果最稳
直接叠加多层 text-shadow 是兼容性最好、上线风险最低的方式。关键不是层数多，而是颜色过渡和模糊值的节奏：内层用高亮色（如 #fff）小模糊（0 0 5px），外层逐步换成主色并加大模糊（0 0 20px #ff00ff）。IE9+、所有现代浏览器都支持，连 Safari 12 以下也不掉链子。
容易踩的坑：
-
text-shadow的模糊值单位别混用：px和em在缩放时行为不同，统一用px更可控 - 超过 8 层阴影在低端 Android WebView 中可能触发渲染卡顿
- 深色背景上慎用纯白内光，容易“糊成一团”，建议加一层
0 0 2px rgba(255,255,255,0.7)做边缘锐化
用 filter: drop-shadow() 做柔和外光更自然
drop-shadow() 会读取文字 alpha 通道，对带圆角、斜体或手写体的文字发光更贴合轮廓，视觉上比 text-shadow 少点“塑料感”。但它只作用于元素整体，不能像 text-shadow 那样逐层调色——你只能给整个文字块加一个柔和外光。
使用场景：
- 需要配合
transform: scale(1.05)做悬停放大时，drop-shadow不会因缩放导致光晕错位 - 文字含透明区域（比如镂空字体、SVG 文本）时，
drop-shadow能正确投射内部空隙的阴影 - 必须避免 WebKit 内核旧版（iOS -webkit-filter 前缀
用 background-clip: text + box-shadow: inset 模拟真·内发光
所谓“霓虹灯管从字里透光”，靠 text-shadow 是骗不到的——它永远是“外面包着光”。真正内发光得把文字当蒙版：先设 color: transparent，再用 background-clip: text 把渐变/纯色背景抠成字形，最后给这个背景加 box-shadow: inset。
实操要点：
- 必须加
-webkit-background-clip: text，否则 Safari 直接不显示 -
box-shadow: inset 0 0 10px #ff00ff的inset是关键，漏写就变成外投影 - 字体必须足够粗（
font-weight: 900或font-size ≥ 24px），细字体一加内阴影就糊成黑边 - Firefox 对
background-clip: text支持不稳定，建议加降级：用text-shadow作 fallback
动画发光时，别让 @keyframes 反复重绘整行文字
动态霓虹灯常靠 @keyframes 循环改变 text-shadow 值。但每帧都改 6–10 个参数，浏览器会强制重排重绘，尤其在移动端易掉帧。更优解是只动 1–2 个变量：
- 只动画
blur值（如0 0 5px → 0 0 30px），其他层固定 - 用
opacity配合两套预设text-shadow切换，比全程插值更省资源 - 加
will-change: text-shadow提前告诉浏览器要动什么，但别滥用——只在 hover 触发后才设
最易被忽略的是可访问性：发光动画若频率在 2–55Hz，可能诱发光敏性癫痫。WCAG 明确要求避免闪烁超过 3 次/秒，用 animation-duration: 1.2s 以上相对安全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
