最简单方法是用 CSS filter 配合多层 text-shadow 模拟霓虹灯效果：text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0066cc, 0 0 40px #000088；背景需为纯黑或深灰，发光色应高饱和、偏青/紫。
用 CSS filter 模拟霓虹灯效果最简单
HTML5 本身没有内置“霓虹滤镜”，但现代浏览器支持的 filter 属性配合 text-shadow 或 box-shadow 能高效模拟出霓虹发光感，无需 Canvas 或 WebGL。关键不是“写个滤镜”，而是组合多层高斯模糊 + 高对比度颜色外扩。
-
text-shadow更适合文字：比如text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0066cc, 0 0 40px #000088; - 对容器或图片用
filter: drop-shadow()更可控，避免文字渲染失真（尤其中文字体） - 慎用
blur()单独叠加——它会软化边缘，削弱霓虹的锐利感；真正起作用的是多层不同半径、不同颜色的阴影叠加
Canvas 2D 手动实现霓虹外发光（需控制像素）
如果必须动态生成、或要绕过 CSS 渲染限制（比如给任意 SVG 路径加霓虹边），就得用 CanvasRenderingContext2D 的 shadowBlur + shadowColor 配合多次描边。
- 先设置
ctx.shadowBlur = 15、ctx.shadowColor = '#00ffff' - 再调用
ctx.stroke()或ctx.fill()—— 注意：必须在绘制前设 shadow，且每次换色/换 blur 都要重设 - 若想模拟“内发光+外发光”双层效果，得绘制两次：一次偏移为 0 的模糊描边（内光），一次用
ctx.translate()微调后再次描边（外光） - 性能敏感场景慎用：每帧多次
shadowBlur切换会触发渲染管线重排，比纯 CSS 慢 3–5 倍
WebGL / SVG filter 不推荐初学者踩坑
虽然 SVG 的
- SVG filter 兼容性没问题，但调试困难：
in/result命名易冲突，Chrome 对feComposite的混合模式解析偶尔不一致 - WebGL 写一个霓虹 fragment shader 至少要处理：中心采样 + 多次 radial blur + HSV 色相偏移 —— 代码量超 50 行，且移动端功耗明显升高
- 除非你在做粒子系统、动态光效 UI 或 AR 滤镜，否则属于过度工程
容易被忽略的关键细节
所有方案都绕不开背景与发光色的对比度问题。霓虹效果失效，90% 是因为：
立即学习“前端免费学习笔记（深入）”；
- 背景不是纯黑（
#000）或深灰（#0a0a0a）—— 浅色背景会让shadow看起来像脏污而不是光晕 - 发光色用了低饱和度蓝（如
#aaa），实际应选高饱和、略带青/紫倾向的色值，例如#00f0ff或#b000ff - 没关掉抗锯齿：Canvas 中
ctx.imageSmoothingEnabled = false对文字霓虹无影响，但对缩放后的路径描边有影响 - 忘了加
will-change: filter—— 在频繁动画时，这句能让 Chrome 主动把元素提升为合成层，避免闪烁
