应避免直接在 box-shadow 中使用 css 变量，因旧版 safari 和 android webview 不支持；推荐用预设 rgba() 值、filter: drop-shadow()、outline 配合负 offset 实现贴边发光，伪元素流光需用 calc() 让 background-size 和 animation 同步缩放，交互状态须同时绑定 :hover/:focus/:active 并补全 -webkit-background-clip 前缀。
用 --glow-color 变量控制发光主色，但别直接赋给 box-shadow 颜色值
直接写 box-shadow: 0 0 12px var(--glow-color); 看似合理，实际在 Safari 16.6 之前和部分 Android WebView 中会失效——因为 box-shadow 的颜色值不支持原生 CSS 变量插值（直到 CSS Color Level 4 才明确支持，而旧引擎只认硬编码色值）。真正可靠的做法是把变量转成 rgba() 或十六进制后参与计算，或用 filter: drop-shadow() 替代。
推荐方案：--glow-color 仅用于定义基础色，再通过 color-mix() 或预设的 rgba() 衍生值生成光晕层：
-
--glow-base: #00aaff;—— 主色基准，可被 JS 动态修改 -
--glow-fade: rgba(0, 170, 255, 0.6);—— 手动配好的半透明值，避免 runtime 解析失败 - 动画中只改
background-position或box-shadow偏移，不动颜色变量本身
配合 outline 实现轮廓线动态粗细，outline-offset 必须为负值
想让发光“贴边”，不能只靠 box-shadow。用 outline 搭配变量才能做到轮廓线粗细随主题切换——比如暗色模式下加粗到 2px，亮色模式缩为 1px。但关键点是：outline-offset 必须设为 -1px 或 -2px，否则光晕和轮廓线之间会出现空白缝隙，尤其在高 DPI 屏幕上非常明显。
错误示例：outline: var(--glow-thickness) solid var(--glow-base); outline-offset: 0; → 光晕外飘，像加粗而非发光。
正确写法：
outline: var(--glow-thickness, 1px) solid var(--glow-base); outline-offset: calc(-1 * var(--glow-thickness, 1px));
这样能确保无论 --glow-thickness 是 1px 还是 2.5px，轮廓都紧贴元素边缘。
伪元素 + background-clip: border-box 实现流光，变量要参与 background-size 计算
做环绕流动光效时，常见做法是用 ::before 伪元素铺一层渐变背景，再靠 background-position 动画驱动。但如果你希望流速随主题变化（比如深色模式下更快），就得让动画时长和 background-size 都响应变量。
注意：background-size 不接受纯数字变量，必须带单位。所以别写 background-size: var(--glow-scale) 300%;，而要写成：
background-size: calc(var(--glow-scale, 2) * 100%) calc(var(--glow-scale, 2) * 100%);
同时，@keyframes 中的 background-position 也得同步缩放，否则光带会拉伸变形或断开：
- 0% →
background-position: 0% 50%; - 50% →
background-position: calc(var(--glow-scale, 2) * 100%) 50%; - 100% →
background-position: 0% 50%;
否则在 --glow-scale: 3 时，动画路径会比背景尺寸短，导致光效“卡顿”或跳帧。
移动端 hover 失效时，变量要 fallback 到 :focus-within 或 :active
CSS 变量本身无交互逻辑，但发光边框常绑定在交互状态上。在 iOS Safari 和多数安卓浏览器里，:hover 在触摸设备上只触发一次（首次点击后），后续就失效。这时候如果只依赖 :hover + 变量，用户第二次点就看不到发光了。
解决方法不是禁用 hover，而是叠加状态钩子：
- 用
:focus-within覆盖表单类容器（如搜索框） - 对按钮加
:active瞬时反馈，配合transition: box-shadow 0.15s - 变量值本身保持不变，但选择器链要覆盖更广：
.btn:focus, .btn:hover, .btn:active
否则你会遇到：变量明明更新了，但 box-shadow 就是不生效——其实是状态没命中，不是变量问题。
最易被忽略的是 background-clip: border-box 在 Safari 旧版需要 -webkit-background-clip 前缀，且一旦用了变量控制 background，前缀就必须同时存在，否则整个渐变光效直接不渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
