只靠 box-shadow + :hover 无法实现清晰边框发光效果，必须配合 outline 或 filter: drop-shadow()；box-shadow 默认投射渐变灰影而非贴边亮起，易显模糊或生硬，outline 提供锐利轮廓线，box-shadow/ drop-shadow() 负责柔和光晕，且需注意兼容性、移动端触发逻辑及暗色模式适配。
直接说结论：只靠 box-shadow + :hover 不足以做出“边框发光”的清晰效果，必须配合 outline 或 filter: drop-shadow()，否则光会晕开、边界模糊、移动端失效。
为什么单纯改 box-shadow 看起来像加粗边框而不是发光
因为 box-shadow 的默认行为是向外投射一个渐变灰影，不是贴着边框“亮起来”。如果水平/垂直偏移设为 0 0、模糊值又太小（比如 4px），结果就是一圈生硬的色环；如果模糊值太大（如 30px），光就散了，看不出哪是边、哪是光。
常见错误写法：box-shadow: 0 0 8px #00f; —— 这在白底上几乎看不见，在深色背景上又糊成一团蓝雾。
真正可用的思路是：让光“附着在轮廓线上”，而不是“飘在外面”。所以得用两层控制：
-
outline提供锐利、不占布局的物理边框线（颜色与光同源） -
box-shadow只负责外扩的柔和光晕，且必须用透明度控制（rgba()）
outline + box-shadow 组合写法（推荐用于按钮/卡片）
这个组合兼容性好（IE11+ 支持）、不改变文档流、响应快。关键点是 outline-offset 必须为负或 0，否则光和线会脱节。
示例代码：
button {
outline: 2px solid #00d1ff;
outline-offset: -2px;
box-shadow: 0 0 0 0 rgba(0, 209, 255, 0);
transition: box-shadow 0.2s ease, outline-color 0.2s ease;
}
button:hover {
outline-color: #00f0ff;
box-shadow: 0 0 12px rgba(0, 240, 255, 0.6), 0 0 24px rgba(0, 240, 255, 0.3);
}
注意几个细节：
-
outline-offset: -2px让 outline 向内收，紧贴元素边缘，避免出现“双线”错觉 -
box-shadow里两个值：第一层控制主光晕（12px模糊），第二层扩大氛围（24px+ 更低透明度） - 不要在
:hover里只改box-shadow颜色，必须同步调outline-color，否则悬停前后像两个不同风格的按钮
用 filter: drop-shadow() 替代 box-shadow 的场景
当目标元素有圆角、镂空、SVG 图标或 PNG 透明区域时，box-shadow 会按矩形盒模型投影，光会“漏出”到不该亮的地方；而 drop-shadow() 基于 Alpha 通道计算，能精准跟随形状边缘发光。
但要注意：
-
drop-shadow()不支持spread-radius，没法“撑大”光圈，只能靠模糊值模拟 - 它不触发硬件加速，大量使用可能卡顿（尤其在旧安卓 WebView）
- 必须搭配
outline或border才能显出“边框感”，否则只有光、没边
典型写法：
img.icon {
outline: 1px solid #ff0066;
outline-offset: -1px;
filter: drop-shadow(0 0 6px rgba(255, 0, 102, 0.7));
transition: filter 0.18s ease;
}
img.icon:hover {
filter: drop-shadow(0 0 12px rgba(255, 0, 102, 0.9));
}
移动端和可访问性容易被忽略的三点
:hover 在触摸设备上不可靠——手指点击不会触发 hover，松开才触发，造成延迟或误触发。这不是 bug，是规范行为。
必须做三件事：
- 用
@media (hover: hover)包裹所有:hover样式，防止触屏设备加载冗余过渡逻辑 - 对关键操作元素（如提交按钮），同时定义
:focus-visible，确保键盘用户也能看到发光反馈 - 禁用
touch-action: manipulation会导致部分安卓机点击无响应，要慎用；更稳妥的是加一层tap-highlight-color: transparent
最常被跳过的细节：发光颜色饱和度在暗色模式下会过曝。别硬编码 #00f0ff，改用 color-mix(in srgb, cyan 80%, white 20%) 或 CSS 自定义属性动态适配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
