用CSS的box-shadow配合:hover伪类可实现图片悬停发光效果：基础版用单层阴影加transition过渡，增强版叠加多层阴影模拟霓虹灯效，适配背景色调整颜色与透明度，并可结合filter提升辉光质感。
用CSS的box-shadow配合:hover伪类就能轻松实现图片悬停发光效果，无需JavaScript。
基础发光效果（单层光晕）
给图片添加过渡动画和悬停时的投影，是最常用也最轻量的方式：
<img src="example.jpg" alt="示例图" class="glow-img">
<p>.glow-img {
transition: box-shadow 0.3s ease;
}
.glow-img:hover {
box-shadow: 0 0 20px rgba(255, 215, 0, 0.8); /<em> 金黄色光晕 </em>/
}说明：
– transition让发光出现更柔和；
– box-shadow四个值分别表示：水平偏移、垂直偏移、模糊半径、颜色；
– 模糊半径（如20px）越大，光晕越扩散；
– rgba()中的透明度（如0.8）控制光晕浓淡，避免过曝。
增强版多层发光（更立体）
叠加多个box-shadow可模拟霓虹灯或柔光灯效：
.glow-img:hover {
box-shadow:
0 0 15px #ffcc00,
0 0 30px #ff9900,
0 0 45px #ff6600;
}建议：
– 每层阴影模糊值递增，颜色由浅到深（或同色系渐变）；
– 避免超过3层，否则性能下降且视觉杂乱；
– 可搭配transform: scale(1.02)轻微放大，增强交互反馈。
适配不同图片与背景
发光效果受背景影响大，需注意兼容性：
立即学习“前端免费学习笔记（深入）”；
- 深色背景上用亮色光（如
#fff、#ffcc00）更明显； - 浅色背景建议改用带透明度的蓝/紫光（如
rgba(100, 150, 255, 0.6)），避免“发白”； - 若图片有透明区域（如PNG图标），发光会自然包裹轮廓，无需额外处理；
- 为防文字或其它元素被光晕干扰，可加
z-index: 2确保图片层级靠前。
进阶：配合滤镜实现辉光质感
结合filter: drop-shadow()或blur()能强化边缘辉光感（适合设计类站点）：
.glow-img:hover {
filter: drop-shadow(0 0 10px #ffcc00) brightness(1.1);
}注意：
– drop-shadow()比box-shadow更贴合图像轮廓（尤其不规则PNG）；
– brightness()可轻微提亮主体，让发光更协调；
– Safari需加-webkit-filter前缀以保兼容。
