用box-shadow实现自然hover发光需控制blur-radius（10–30px）、spread-radius（0或2px）、rgba颜色透明度及0.3s ease过渡；注意border-radius、overflow、背景对比度及多层阴影叠加。
直接用 box-shadow 配合 :hover 就能实现，不需要 JS，也不用 SVG 或滤镜——但很多人调不出“干净的发光”，问题通常出在阴影扩散值、颜色透明度和过渡节奏上。
怎么用 box-shadow 写出自然的 hover 发光
发光本质是向外扩散的半透明色块叠加，box-shadow 的四个参数中，关键在后两个：blur-radius（模糊程度）和 spread-radius（扩散范围）。值太大容易糊成一团，太小又像没亮。
-
blur-radius推荐 10–30px：10px 是细腻光晕，30px 更梦幻但边缘更软 -
spread-radius一般设为 0 或正小值（如2px），负值会收缩光晕，不适合发光 - 颜色必须带 alpha，比如
rgba(255, 215, 0, 0.6)，纯#FFD700会像贴了层不透明色块 - 务必加
transition: box-shadow 0.3s ease，否则亮灭生硬，像灯泡开关
.glow-btn {
padding: 12px 24px;
border: none;
background: #333;
color: white;
border-radius: 6px;
transition: box-shadow 0.3s ease;
}
.glow-btn:hover {
box-shadow: 0 0 20px 4px rgba(255, 215, 0, 0.6);
}
为什么加了 box-shadow 却没看到光？常见漏点
不是代码写错，而是被其他样式盖住了，或者触发条件没满足。
- 元素没有明确的
border-radius：直角盒子发光时，阴影四角会突兀拉长，看起来像 bug；圆角能柔化过渡 -
overflow: hidden父容器裁掉了阴影：发光是绘制在父元素外的，父级如果设了隐藏，光就没了 - 用了
transform: scale()同时 hover：某些浏览器下会触发渲染层叠问题，导致阴影不出现或闪烁 - 背景是白色或浅色时，黄色/白色光晕对比度低，显得“没光”——换深色背景或改用青蓝系（如
rgba(100, 200, 255, 0.7)）立刻明显
多层 box-shadow 叠加让光更有层次感
单层阴影容易扁平。两层可以模拟内辉光 + 外弥散的效果，比调大单个 blur 更可控。
立即学习“前端免费学习笔记（深入）”；
- 第一层：小 blur + 小 spread，贴近元素，模拟高光（如
0 0 8px 2px rgba(255, 255, 255, 0.8)） - 第二层：大 blur + 0 spread，往外晕开，模拟环境光（如
0 0 30px rgba(255, 215, 0, 0.4)） - 两层之间用逗号分隔，顺序不影响显示，但建议从内到外写，方便维护
.glow-btn:hover {
box-shadow:
0 0 8px 2px rgba(255, 255, 255, 0.8),
0 0 30px rgba(255, 215, 0, 0.4);
}
真正难的不是写出来，是调得“像光”——它得有呼吸感，不能死亮；得贴着内容，不能飘在外太空；还得在不同背景色下都成立。多试两组 blur 和 alpha 组合，比找现成 CSS 库更快。
