drop-shadow() 是处理PNG等透明图片发光最可靠方案，能精准贴合图像轮廓；box-shadow仅作用于矩形盒模型，会导致光晕溢出。正确用法：x/y为0、blur≥8px、color用rgba(0.4–0.8)，需注意overflow、transition及Safari兼容性。
filter: drop-shadow() 是目前最靠谱的选择，尤其对 PNG 等带透明背景的图片——它真能贴着图像轮廓发光，不是框个方块再糊一圈。
为什么不用 box-shadow 直接套图片？
它只围绕 <img alt="HTML怎么给图片加一个漂亮的外发光效果" > 的矩形盒模型发光，PNG 的锯齿边缘、镂空部分全被忽略，光晕会“溢出”到不该亮的地方。常见现象是：圆角头像发光后四角突兀发亮，或者图标中间透明区域也被一并罩上光晕。
除非你明确要矩形光晕（比如卡片外框），否则别用 box-shadow 单独处理图片本身。
drop-shadow() 的正确写法和坑点
语法是 filter: drop-shadow(x y blur color)，但给图片发光时，必须满足：
– 前两个值 x 和 y 都为 0，否则变成位移阴影，不是发光
– blur 值至少 8px 起，12px–20px 更自然
– color 推荐用 rgba()，alpha 控制在 0.4–0.8 之间，太满会盖住原图
- 基础示例：
filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.7)); - 父容器加了
overflow: hidden？发光会被裁掉——必须去掉或改用visible - 没加
transition: filter 0.3s ease？hover 切换时会“啪”一下闪现，毫无质感 - Safari 旧版需补
-webkit-filter前缀；IE 完全不支持，得准备回退方案（比如仅用box-shadow+ 圆角容器模拟）
想更亮？叠两层 drop-shadow() 比调大单层更可控
单层加大 blur 容易发虚、失真。多层叠加能模拟光学衰减：内层锐利明亮，外层柔和扩散。
写法就是空格分隔，顺序不重要，但建议按模糊半径从小到大排：
filter: drop-shadow(0 0 8px #ffcc00) drop-shadow(0 0 16px rgba(255, 100, 0, 0.4));
注意：
– 不要超过三层，渲染开销会上升，尤其在低端移动设备上
– 颜色别全用纯白，加点色相（如金黄、青蓝）能让效果更“活”
– 所有层的 x 和 y 必须都是 0，哪怕只有一层偏了，整体会偏移
立即学习“前端免费学习笔记（深入）”；
需要“扫光”动画？别动 filter，用伪元素
如果目标是鼠标悬停时一道高光从左上掠过图片（比如 Logo 或按钮），drop-shadow() 无法实现平滑位移动画——滤镜动画性能差，且不支持 background-position 这类属性。
这时该用 ::before 或 <span></span> 伪元素，配合线性渐变和 background-position 过渡：
- 外层容器设
overflow: hidden，防止高光溢出 - 伪元素背景用
linear-gradient(135deg, transparent, rgba(255,255,255,0.8), transparent) - 关键：设
background-size: 200% 200%，再用transition动background-position - hover 时从
0% 0%→100% 100%，就能模拟光扫过
这种方案和 drop-shadow() 本质不同：一个是静态/交互式发光，一个是动态闪光。混用反而容易打架——比如同时 hover 触发两者，光效会冲突、闪烁。
drop-shadow() 参数和容器约束，后者彻底放弃滤镜，走伪元素路径。选错方向，调三天也出不来想要的效果。 
