用 box-shadow 实现图片悬停发光需配合 transition 才有动画效果，且图片设为 block、父容器限制宽度；响应式必须用 srcset + sizes；触屏设备用 @media (hover: hover) 隔离 hover 样式；box-shadow 推荐参数为 0 0 12px 4px rgba(255,215,0,0.4)。
用 box-shadow 实现图片悬停发光，但必须加 transition
纯 CSS 实现发光特效最常用、最轻量的方式就是改 box-shadow。但很多人写了 :hover 却没效果，根本原因是漏了过渡声明——浏览器默认不自动补间动画，必须显式写 transition: box-shadow 0.3s ease;。否则悬停瞬间亮/灭，毫无“发光”感，反而像闪烁 bug。
注意：图片需设为块级元素（display: block），否则 box-shadow 可能被行内布局截断；父容器最好有明确宽度或 max-width，否则在小屏下阴影溢出视口。
响应式图片必须用 srcset + sizes，不能只靠 width: 100%
仅用 img { width: 100%; height: auto; } 是伪响应式——图片文件本身还是大图，移动端照样下载高清资源，拖慢加载、浪费流量。真正响应式得让浏览器按设备像素比和视口宽度选图。
实操要点：
-
srcset提供多尺寸原图（如"photo-400w.jpg 400w, photo-800w.jpg 800w"） -
sizes告诉浏览器“这张图在不同断点下占多宽”（如"(max-width: 768px) 100vw, 50vw"） -
src作为降级兜底（老浏览器 fallback）
发光特效和响应式加载互不干扰，但若省略 srcset，再炫的 hover 效果也救不了首屏卡顿。
移动端 hover 不触发？用 @media (hover: hover) 隔离样式
手机和平板没有“鼠标划过”概念，:hover 在 iOS Safari 和多数安卓浏览器里要么不触发，要么点击后才触发一次，导致发光效果错乱或残留。硬加 touchstart JS 监听反而增加复杂度。
更稳妥的做法是用媒体查询隔离：
@media (hover: hover) {
img.glow:hover {
box-shadow: 0 0 20px rgba(255, 220, 0, 0.7);
transition: box-shadow 0.3s ease;
}
}
这样 PC 端正常生效，触屏设备直接跳过整段 hover 样式，避免意外行为。别信“加 cursor: pointer 就能激活 hover”，那只是骗浏览器模拟，不可靠。
发光太刺眼或边缘模糊？调 box-shadow 的三个参数
box-shadow 三个关键值直接影响发光观感：blur-radius（模糊度）、spread-radius（扩散范围）、color（颜色透明度）。常见翻车点：
- 只加大
blur-radius（如0 0 50px #ff0）→ 光晕发虚、失焦，像对不上焦 - 漏写
spread-radius→ 光从图片边缘“炸开”，缺乏包裹感 - 用不透明色（如
#ff0）→ 强光压住图片细节，尤其暗部丢失
推荐起手式：box-shadow: 0 0 12px 4px rgba(255, 215, 0, 0.4)。其中 4px 是正向扩散，让光“包住”图片轮廓；0.4 透明度保底图可见；调试时优先动 blur 和 alpha，少碰 spread。
复杂点在于不同图片明暗反差差异大，同一套发光参数在浅色背景图上可能隐形，在深色图上又过曝——没有全局最优解，得按图微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
