用text-shadow实现霓虹效果需叠加3–5层0偏移阴影，逐层增大模糊半径（0.1em→1em）并降低透明度（0.8→0.2），推荐高饱和hsl色；用CSS变量统一控制颜色与强度，避免硬编码；注意小字号限模糊、禁用antialiased、深色背景及对比度合规。
用 text-shadow 实现基础霓虹发光效果
核心就是叠加多层 text-shadow，从内到外逐层加大模糊半径和颜色透明度。浏览器原生支持，无需 JS 或额外依赖。
常见错误是只加一层阴影——看起来像描边，不是“光晕”；或者颜色用纯白/纯蓝导致过曝、发灰。
- 至少用 3–5 层
text-shadow，每层偏移量保持0 0（不位移），只调模糊值和透明度 - 推荐起始模糊值：
0.1em→0.3em→0.6em→1em，对应透明度从0.8递减到0.2 - 发光色建议用
hsl(200, 100%, 60%)这类高饱和度色，比#00ffff更可控
CSS 变量控制动态霓虹效果
硬编码多层 shadow 难维护，尤其要切换颜色或强度时。用 CSS 自定义属性 + calc() 能把逻辑收拢。
注意：Safari 对 text-shadow 中使用 var(--x) 的兼容性良好（v12.1+），但旧版可能忽略整条声明。
立即学习“前端免费学习笔记（深入）”；
- 定义主色和强度：
--neon-color: hsl(270, 100%, 65%); --neon-strength: 0.7; - 每层阴影用
calc(var(--neon-strength) * 0.4)控制透明度，避免手算出错 - 动画时只改
--neon-color或--neon-strength，所有层自动响应，不用重写整个text-shadow
避免文字边缘锯齿与性能问题
高模糊值 + 高透明度叠加容易让字体边缘发虚、糊成一片，尤其在小字号或 Retina 屏上更明显。
这不是 bug，而是 text-shadow 渲染机制决定的：每层都是独立高斯模糊，叠加后高频信息被过度平滑。
- 字号低于
18px时，把最大模糊值压到0.5em以内，否则发光变“毛边” - 禁用
font-smoothing: antialiased（尤其 macOS），它会削弱发光锐度；保留默认或用auto - 不要对
text-shadow做transform: scale()动画——触发重绘开销大，且模糊会失真
兼容性兜底与可访问性提醒
IE 完全不支持 text-shadow 多层叠加（只认第一层），但现代项目基本可忽略。真正容易被忽略的是语义和对比度。
霓虹效果常导致文字与背景对比不足，WCAG AA 级要求文本对比度 ≥ 4.5:1，而发光色+半透阴影很容易跌破阈值。
- 用
background-clip: text+-webkit-text-fill-color: transparent替代纯阴影，能强化主体文字色 - 必须配深色背景（如
#0a0a1a），浅色背景上霓虹=看不见 - 检查实际渲染对比度：Chrome DevTools 的 Accessibility 面板里点「Contrast」，别信肉眼感觉
发光效果越强，越要确认文字是否还“可读”。动效、颜色、模糊值三者稍一叠加，就可能让内容退居装饰地位——这恰恰是多数人一开始没意识到的代价。
