最轻量兼容的发光边框方案是为button:hover设置多层box-shadow并配合transition。需设三层不同模糊值阴影（如5px/10px/15px）、明确transition: box-shadow 0.2s ease、兼顾:focus与深色模式适配，并确保无障碍对比度达标。
button:hover 时用 box-shadow 实现发光边框
直接给 button 元素加 :hover 状态下的 box-shadow 是最轻量、兼容性最好的方案。不要试图用 outline 或 border 动画模拟发光——它们没法产生柔化光晕效果。
关键点在于：阴影需设为 多层叠加（模拟光晕层次），且必须配合 transition 控制变化节奏，否则会突兀闪烁。
button {
border: 2px solid #333;
transition: box-shadow 0.2s ease;
}
button:hover {
box-shadow:
0 0 5px #66b3ff,
0 0 10px #66b3ff,
0 0 15px #3399ff;
}
-
box-shadow的三个参数分别是水平偏移、垂直偏移、模糊半径，这里全设为0才能形成均匀环绕的光晕 - 模糊半径越大，光越“散”，但超过
20px在低分辨率屏上容易糊成一团，建议控制在5–15px区间 - 别只写一层阴影——单层
box-shadow光感弱、边缘生硬；两到三层不同模糊值叠加才像真发光
transition 触发条件和延迟陷阱
很多人写了 transition 却没动画，是因为漏掉了「触发属性」或用了不支持过渡的 CSS 属性。发光依赖的是 box-shadow 变化，所以 transition 必须明确指定它，不能只写 all。
- ❌ 错误写法：
transition: all 0.2s;—— 某些浏览器对all过渡有性能抑制，尤其旧版 Safari - ✅ 正确写法：
transition: box-shadow 0.2s ease;—— 精准控制，无兼容风险 - 如果按钮初始状态没有
box-shadow，要显式设为box-shadow: none;，否则部分浏览器（如 Firefox）可能从“无”跳变到“有”，导致首帧闪烁
移动端触摸设备的 hover 失效问题
在 iOS 和部分 Android 浏览器里，:hover 不会自动触发，除非用户真正“悬停”——而触摸屏没有悬停概念。结果就是按钮在手机上点不动、不发光。
- 简单解法：给
button加touch-action: manipulation;，并确保它可聚焦（比如有tabindex="0"或原生可交互） - 更稳妥的做法是同时响应
:focus和:hover：button:hover, button:focus { box-shadow: ... } - 注意：Safari 对
:focus的默认 outline 样式会干扰发光效果，记得加outline: none;，但务必用其他方式（如box-shadow本身）提供焦点反馈，否则不符合无障碍要求
发光颜色与背景对比度的实际约束
别只顾着调出好看的蓝光紫光——如果按钮放在深色背景上，浅色发光（如 #66b3ff）没问题；但若背景是白色或浅灰，同一套阴影会几乎不可见。
- 检查方式：打开浏览器开发者工具，把页面背景临时改成
white，看发光是否还清晰 - 推荐做法：用 CSS 自定义属性动态适配，比如
--glow-color: var(--primary-color);，再让设计师提供深/浅两套主题色值 - 额外提醒：WCAG 要求焦点态发光至少满足 3:1 的对比度，纯靠视觉判断容易翻车，可用插件（如 axe DevTools）快速验证
box-shadow 颜色，或者没处理 :focus 与 :hover 同时存在时的叠加冲突。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
