最稳妥的CSS发光效果是用:hover配合box-shadow加transition：box-shadow: 0 0 12px 4px rgba(100,200,255,0.6)，transition: box-shadow 0.3s ease，同时兼顾移动端:active反馈与高对比度模式后备方案。
用 CSS :hover 配合 box-shadow 实现发光效果
发光本质是加一层柔和的外阴影，box-shadow 是最直接、兼容性好、不干扰布局的方式。别用 text-shadow（只对文字有效）或强行改背景色（不是发光）。
常见错误：阴影太硬、颜色太亮、没设 transition 导致闪烁或突兀。下面是最稳妥的写法：
-
box-shadow: 0 0 12px 4px rgba(100, 200, 255, 0.6)—— 模糊半径12px、扩散半径4px控制光晕大小，rgba保证通透不刺眼 - 必须加
transition: box-shadow 0.3s ease，否则鼠标一进一出就是“啪”一下闪，体验很差 - 按钮本身要有明确的
border或background，否则发光没参照，看起来像在“浮空”
按钮 HTML 结构要带 class 且避免内联样式
别写 <button style="...">，那样没法单独控制 :hover。用 class 才能干净分离状态：
<button class="add-to-cart">加入购物车</button>
对应 CSS：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
.add-to-cart {
background: #4a90e2;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
transition: box-shadow 0.3s ease;
}
.add-to-cart:hover {
box-shadow: 0 0 12px 4px rgba(100, 200, 255, 0.6);
}
如果按钮用了 outline: none，记得保留 focus 状态的发光（可选但推荐）：&:focus { box-shadow: ... }，方便键盘用户。
移动端和高对比度模式下要注意什么
纯靠 :hover 在手机上基本无效——手指点下去没有“滑过”过程。所以不能只依赖它：
- 触摸设备会触发
:active，可补充：&:active { transform: scale(0.98); }给点击反馈 - Windows 高对比度模式下，
box-shadow可能被强制忽略。如果项目需无障碍合规，建议同时加一个微弱的border-color变化作为后备 - 不要用
filter: drop-shadow()替代box-shadow，它性能更差，且对圆角按钮渲染不一致
发光颜色选不对，反而显得廉价
蓝色系（如 rgba(100, 200, 255, 0.6)）最安全，和多数电商主色协调；慎用纯白 rgba(255,255,255,0.8)，容易过曝、像故障光。实际调试时重点看两个值：
-
alpha（透明度）别超过0.7，否则盖住按钮本身 - 模糊半径和扩散半径比例建议保持
3:1（比如12px 4px），太扁或太圆都不自然
真要换色，优先试浅青、淡紫，避开荧光绿和亮红——它们在屏幕上容易“震眼”，尤其小尺寸按钮。
