霓虹效果需多层box-shadow同色叠加，每层仅调模糊半径与透明度，背景须深色且容器禁overflow:hidden。
纯色本身不发光，霓虹效果完全依赖多层 box-shadow 的颜色叠加与衰减控制——不是“选对颜色就行”，而是“用对颜色+对层数+对透明度”才能出效果。
box-shadow 多层同色叠加实现基础霓虹光晕
单层 box-shadow 只能模拟模糊边框，要出霓虹感必须叠 3–4 层，且每层只变模糊半径和透明度，颜色保持一致：
- 所有阴影的
offset-x和offset-y必须为0，否则光晕偏移、不对称 - 模糊半径需递增（如
5px→12px→24px→48px），模拟光在空气中自然扩散 - 外层必须用
rgba()降 alpha，不能靠改深色（比如从#0ff改成#07f），否则色相偏移、发灰 - 示例写法：
box-shadow: 0 0 5px #0ff, 0 0 12px rgba(0, 255, 255, 0.7), 0 0 24px rgba(0, 255, 255, 0.4), 0 0 48px rgba(0, 255, 255, 0.2);
混用多色 box-shadow 容易变成杂光而非霓虹
有人把蓝、紫、粉全塞进一层 box-shadow，结果是“光斑乱飞”，不是霓虹。原因在于人眼对冷暖色散射路径敏感，真实霓虹管是单色荧光粉受激发光，不是RGB混合：
- 避免在同一组
box-shadow中混用明显不同色相的颜色（如#0ff+#f0f） - 若真要冷暖过渡，应严格按物理逻辑：内核偏青白（高色温），中层主色（如蓝/紫），外晕微偏品红（散射补偿），跨度控制在 30° 色相角内
- 更稳妥的做法是全程单色系，仅靠
hsla()微调色相+饱和度，例如：hsla(180, 100%, 70%, 0.8)→hsla(200, 90%, 60%, 0.4)
背景色和容器设置会直接吃掉霓虹效果
再准的 box-shadow 在浅灰或白色背景上也显不出来，霓虹本质是“暗场中的光发射”：
- 背景必须是深色：推荐
background-color: #000或#0a0a0a；#333已经开始吞外层光晕 - 父容器不能设
overflow: hidden——霓虹光晕是向外溢出的，裁剪等于砍掉最外两层 - 如果用了
backdrop-filter: blur()，记得给容器加一层极低透明度的遮罩色，例如background-color: rgba(0, 0, 0, 0.03)，否则毛玻璃会干扰阴影渲染层级 - 移动端 Safari 对超大模糊值（>30px）支持不稳定，真机测试时建议外层上限设为
40px并搭配will-change: transform防掉帧
真正难的不是写对那几行 box-shadow，而是判断哪一层该压多少透明度、在哪种背景下哪一层会消失、以及 Safari 真机里第几层开始 fallback——这些没法靠复制粘贴解决，得一层层调着看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
