drop-shadow()是唯一能精准贴合PNG/SVG像素轮廓发光的方案，box-shadow仅作用于矩形盒模型；需设x/y为0、blur≥8px、rgba色值alpha在0.4–0.8间，配合tabindex和:focus实现无障碍聚焦。
直接用 filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.7))，别碰 box-shadow 单独套 <img>——它只框矩形，PNG 的锯齿和镂空区域全被忽略，光晕会“溢出”到不该亮的地方。
为什么 drop-shadow() 是唯一靠谱的选择
drop-shadow() 作用于图像实际像素轮廓，不是盒模型边界。对 PNG、SVG 等带透明背景的图片，它能严丝合缝地贴着边缘发光；而 box-shadow 永远只围绕 <img> 的矩形盒子渲染，圆角头像四角突兀发亮、图标中间透明洞被糊上光晕，都是典型表现。
常见错误现象：
- 父容器设了
overflow: hidden，发光被裁掉（必须改成visible或去掉） - hover 时“啪”一下闪现，没过渡（漏写了
transition: filter 0.3s ease） - Safari 旧版不生效（需补
-webkit-filter前缀）
drop-shadow() 参数怎么配才不翻车
语法是 filter: drop-shadow(x y blur color)，但给图片发光时，x 和 y 必须为 0，否则变成位移阴影，不是发光。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
blur至少从8px起，12px–20px更自然；小于6px几乎看不出效果 -
color推荐用rgba()，alpha 控制在0.4–0.8之间；纯白#fff容易盖住原图细节 - 想更亮？叠两层比调大单层更可控：
filter: drop-shadow(0 0 8px #ffcc00) drop-shadow(0 0 16px rgba(255, 100, 0, 0.4)) - 所有层的
x和y都得是0，哪怕只有一层偏了，整体会偏移
图片要支持键盘聚焦？先加 tabindex
默认 <img> 不可聚焦，:focus 样式无效。要让发光效果响应键盘 Tab 导航，必须显式添加 tabindex 属性。
-
tabindex="0"：加入默认 Tab 序列，用户能用 Tab 键导航到该图片 -
tabindex="-1"：不能通过 Tab 进入，但可用 JavaScript 调用.focus()手动聚焦 - 别写
tabindex="1"之类正整数——会打乱页面自然焦点流，影响无障碍体验 - 搭配
:focus时，记得加outline: none并用drop-shadow()替代，否则双焦点环打架
扫光动画别硬怼 filter
如果目标是鼠标悬停时一道高光从左上掠过图片（比如 Logo），drop-shadow() 无法实现平滑位移动画——滤镜动画性能差，且不支持 background-position 类属性。
正确做法是用伪元素：
- 外层容器设
overflow: hidden -
::before用linear-gradient(135deg, transparent, rgba(255,255,255,0.8), transparent)+background-size: 200% 200% - hover 时过渡
background-position，例如从0 0到100% 100% - 避免用真实图片做高光图，渐变性能更稳，适配暗色模式也更方便
真正难的不是写对那行 filter，而是判断什么时候该用 drop-shadow()、什么时候该切伪元素、什么时候必须加 tabindex——三者混用场景里，漏掉任意一个约束条件，效果就断在用户眼皮底下。
