可使用css filter的drop-shadow实现图片发光效果，支持单层、多层叠加、box-shadow混合、响应式适配及兼容性回退五种方法。
如果您希望在HTML5页面中为图片添加发光效果，可以使用CSS的filter属性配合drop-shadow函数实现。以下是实现该特效的具体方法：
一、基础drop-shadow发光效果
drop-shadow滤镜通过在元素边缘投射阴影来模拟发光，适用于PNG透明背景图片，能自然包裹图像轮廓。其语法为drop-shadow(x-offset y-offset blur-radius color)，其中模糊半径决定光晕扩散程度。
1、在HTML中插入img标签，并为其设置class名称，例如class="glow-img"。
2、在
立即学习“前端免费学习笔记（深入）”；
3、可调整blur-radius值（如8px、20px）控制光晕强弱，color值可替换为rgba(255, 100, 100, 0.7)实现半透红光效果。
二、多层drop-shadow叠加增强光感
单层drop-shadow可能光晕不够饱满，通过叠加多个不同偏移与模糊值的阴影，可模拟更真实的辉光层次，尤其适合突出主体或营造霓虹氛围。
1、使用空格分隔多个drop-shadow函数，例如filter: drop-shadow(0 0 8px #00ffff) drop-shadow(0 0 16px #0099cc) drop-shadow(0 0 24px #006699)。
2、确保各层颜色由亮到暗、模糊值由小到大，以符合光学衰减规律。
3、避免使用过大偏移值（如5px以上），否则会形成明显位移而非发光。
三、结合box-shadow实现外发光+内发光混合效果
drop-shadow仅作用于图像内容轮廓，无法影响透明区域；而box-shadow作用于整个盒模型。二者结合可在图片外缘加光的同时，在内侧边缘补充高亮，增强立体感。
1、为img元素设置padding值（如padding: 6px），并设置background: linear-gradient(135deg, #ff9a9e, #fad0c4)作为底色衬托。
2、同时应用filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8))和box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.6)。
3、inset关键字使box-shadow向内投射，形成边缘提亮效果，与外侧drop-shadow形成内外呼应。
四、响应式发光适配不同屏幕尺寸
固定blur-radius在小屏设备上易导致光晕过重，在大屏上则显得微弱。通过媒体查询动态调整filter参数，可保持视觉一致性。
1、默认样式中设置filter: drop-shadow(0 0 8px #ffcc00)。
2、在@media screen and (min-width: 768px)中重写为filter: drop-shadow(0 0 14px #ffcc00)。
3、在@media screen and (min-width: 1200px)中进一步提升至filter: drop-shadow(0 0 22px #ffcc00)。
五、禁用硬件加速时的兼容性回退方案
部分旧版Safari或移动端浏览器对filter支持不稳定，启用-webkit-filter前缀并提供outline或border替代样式，可保障基础视觉反馈不丢失。
1、在CSS中同时声明filter: drop-shadow(0 0 10px #ffcc00)和-webkit-filter: drop-shadow(0 0 10px #ffcc00)。
2、为.img-glow类添加outline: 2px solid transparent过渡占位。
3、当检测到filter失效时（如通过JavaScript判断getComputedStyle结果为空），动态添加class="fallback-border"并设置border: 2px solid rgba(255, 204, 0, 0.4)。
