CSS自定义变量控制text-shadow是最灵活可维护的霓虹方案，通过--neon-core/mid/outer三元组分层管理，避免字符串拼接和过度层数，配合类名切换实现动态主题，注意透明度与性能优化。
直接用 CSS 自定义变量（--neon-color、--neon-blur 等）控制 text-shadow，是最灵活、可维护性最强的动态霓虹方案——它不依赖 JS，改一个变量就能全局联动光色、强度、动画节奏。
用 CSS 变量组织多层 text-shadow 的结构
硬编码 6 层 text-shadow 值会让样式表臃肿且难调试。变量化后，每层阴影可抽象为「偏移 + 模糊 + 颜色」三元组，并统一用 px 单位避免缩放错位：
-
--neon-core: 0 0 3px #fff（内层白光，固定小模糊） -
--neon-mid: 0 0 12px var(--neon-color)（中层过渡，颜色由主变量驱动） -
--neon-outer: 0 0 28px var(--neon-color)（外层主色大模糊，决定视觉张力） - 最终
text-shadow: var(--neon-core), var(--neon-mid), var(--neon-outer)
注意：不要把所有值都塞进单个变量（如 --shadow: "0 0 5px #fff, ..."），字符串无法被动画或计算函数（calc()）读取，浏览器会忽略。
让 @keyframes 动态响应变量变化
CSS 动画本身不能监听变量变更，但你可以用「预设多套变量 + animation 切换类名」的方式实现“动态”效果：
立即学习“前端免费学习笔记（深入）”；
- 在
:root定义多组主题：--neon-color: #ff00de（粉）、--neon-color-alt: #00f7ff（青） - 写两套
@keyframes，分别引用不同变量：neon-pink用var(--neon-color)，neon-cyan用var(--neon-color-alt) - 通过 JS 切换元素 class（如
neon--pink→neon--cyan），触发对应动画和变量绑定 - 若纯 CSS 驱动，可用
:hover或媒体查询（如@media (prefers-color-scheme: dark)）切换变量值
关键限制：animation 中无法用 calc(var(--neon-blur) * 2) 动态缩放模糊值——CSS 不支持变量参与运行时计算，只能预先定义好几档（--blur-sm: 8px / --blur-lg: 24px）。
性能陷阱：变量本身不卡顿，但滥用会间接拖垮渲染
变量是语法糖，不会增加开销；真正掉帧的是你用变量“掩盖”了底层问题：
- 超过 6 层
text-shadow（哪怕全用变量声明）在低端 Android WebView 中仍可能触发 CPU 渲染，建议保持 ≤4 层 - 频繁 JS 修改
document.documentElement.style.setProperty('--neon-color', ...)会强制重绘整行文字，比切换 class 更重 -
will-change: text-shadow对变量无感，必须显式加在目标元素上才生效 - Firefox 对
background-clip: text+ 变量组合支持不稳定，内发光方案慎用变量驱动box-shadow: inset
最易被忽略的一点：深色背景上，--neon-core 若设为 #fff 且未加 rgba(255,255,255,0.7) 控制透明度，动画过程中高亮层会瞬间“糊成一团”，失去层次感——变量要带 alpha，别只传纯色。
