用CSS变量控制box-shadow扩散半径可实现批量调整、响应式适配和主题切换，需确保变量嵌入完整阴影语法中，避免IE兼容问题，并按设备尺寸合理设置比例值。
为什么用CSS变量控制box-shadow的扩散半径
直接写死box-shadow: 0 0 12px 4px #00f看似简单，但一旦要批量调整、响应式适配或支持主题切换，就得全局替换所有数值。用CSS变量能把「扩散半径」（即box-shadow第四个参数）抽出来统一管理，改一处，全链路生效。
--glow-spread变量必须配合box-shadow的完整语法使用
扩散半径不能单独动画或独立声明，它只是box-shadow的一个位置参数。所以定义变量时得确保它被嵌入到合法的阴影值中：
- ✅ 正确：
box-shadow: 0 0 12px var(--glow-spread) rgba(0, 100, 255, 0.6) - ❌ 错误：
box-shadow: 0 0 12px var(--glow-spread);（缺颜色，浏览器会丢弃整条声明） - ⚠️ 注意：IE完全不支持
var()在box-shadow里，如需兼容，得用@supports降级为固定值
响应式场景下--glow-spread的典型取值策略
扩散半径不是越大越好——它和元素尺寸、模糊半径强相关。盲目设成8px在小图标上会糊成一团，在大卡片上又显得单薄。推荐按容器宽度比例缩放：
- 移动端（
max-width: 480px）：--glow-spread: 1px - 桌面端（
min-width: 768px）：--glow-spread: 3px - 高清屏（
prefers-reduced-motion: reduce关闭时）可叠加calc(var(--glow-spread) * 1.5)
别忘了给box-shadow配一个略小的模糊半径（比如10px），否则扩散值过大时边缘会发虚、失焦。
立即学习“前端免费学习笔记（深入）”；
多个发光层级共用同一变量时的常见冲突
当一个组件同时用box-shadow模拟内光晕+外光晕，又都依赖--glow-spread，容易出现「内层太厚压住外层」或「外层扩散溢出容器」。这时应拆分为两个变量：
-
--glow-spread-inner：用于inset阴影，值通常为0或负数（如-1px） -
--glow-spread-outer：用于外阴影，保持正数，且建议不超过4px（再大就难控制裁剪边界） - 切忌用
!important覆盖变量——它会破坏CSS变量的继承链，调试时根本看不出谁在改值
真正灵活的发光控制，不在变量多寡，而在扩散半径是否与模糊半径、元素尺寸形成稳定比例关系。随便调大--glow-spread只会让光效从「聚焦」变成「晕染」。
