霓虹光效需用3–4层text-shadow叠加，从内到外按1px蓝→2px青→4px紫→8px粉、全0偏移、高饱和低透明色实现；禁用黑色半透值，旧版safari可能失效。
text-shadow 多重叠加实现霓虹光效的关键写法
直接用 text-shadow 叠加 3–4 层不同偏移、模糊度和颜色的阴影，就能模拟出霓虹灯那种由内到外渐变发散的光晕。不是靠 JS 或 SVG，纯 CSS 就够用。
常见错误是只写一层或两层，结果只有“发光”感，没有“霓虹”的通透膨胀感；或者颜色全用同色系，缺乏冷暖过渡，显得脏。
-
text-shadow值之间用逗号分隔，顺序很重要：越靠前的阴影越靠近文字，越靠后的越外扩 - 推荐从内到外：1px 模糊蓝（主色内核）→ 2px 模糊青→ 4px 模糊紫→ 8px 模糊粉，形成色温递进
- 所有阴影
offset-x和offset-y必须为0，否则文字会偏移、虚化不均匀 - 不要用
rgba(0,0,0,0.5)这类半透黑色——它吸光，会让霓虹变灰暗；改用高饱和度的亮色 + 低透明度，如hsla(240, 100%, 70%, 0.6)
兼容性与性能陷阱：哪些浏览器会掉光效
text-shadow 本身兼容性极好（IE10+ 都支持），但多重叠加在旧版 Safari（
这不是写法错，是渲染引擎限制：Safari 对单个 text-shadow 声明中的阴影数量做过硬限制（曾为 2 层），虽已放宽，但低端设备仍可能 fallback。
- 测试时务必在真机 Safari 和微信内置浏览器中打开，不能只信 Chrome DevTools 模拟
- 如果必须强兼容，可降级为双层：内层
0 0 2px #00f+ 外层0 0 12px #f0f，牺牲层次保可用 - 避免在
font-size 的小字上用太多层，模糊半径小于 1px 的阴影在高清屏上易消失
配合 backdrop-filter 实现「玻璃霓虹」效果
单纯文字发光容易浮在背景上，缺乏环境融合感。加一层毛玻璃背景（backdrop-filter: blur()），再让霓虹色微微透出，才有赛博朋克 UI 的味道。
但两者叠加时，backdrop-filter 会干扰阴影渲染层级，尤其在 Firefox 中可能出现光晕被裁切。
- 容器必须设
background-color: rgba(255,255,255,0.05)或类似微透色，否则backdrop-filter无作用 -
text-shadow的最外层模糊半径建议 ≥ 容器blur(8px)的值，否则光晕被“框住” - 别给文字父容器设
overflow: hidden—— 霓虹光晕是向外扩散的，裁剪会直接砍掉外层效果
动态霓虹：用 CSS 变量控制亮度与色相
想让霓虹随状态呼吸闪烁，不用 JS 改 class，用 CSS 变量 + transition 更轻量。关键在于把颜色和模糊值抽成变量，只动它们。
但注意：text-shadow 不支持直接动画，必须靠变量触发重绘，且过渡要限定在可插值属性上（如 hsl() 色相、透明度，不能动像素值）。
- 定义变量：
--neon-hue: 240; --neon-alpha: 0.7;，阴影中用hsla(var(--neon-hue), 100%, 60%, var(--neon-alpha)) - hover 时只改
--neon-hue和--neon-alpha，不要试图transition: text-shadow—— 无效 - 模糊半径（如
4px）不能用变量替代，否则 transition 会卡顿甚至失效；需预设几档固定值，用 class 切换
text-stroke: 1px rgba(0,0,0,0.1) 勾边，让光效有依托。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
