img:hover 的 box-shadow 无效是因为图片默认 display: inline，而该属性不支持 box-shadow；需显式设为 block 或 inline-block，或改用 filter: drop-shadow()。
直接给 <img alt="HTML怎么给图片加点击阴影_网页图片动态反馈【教程】" > 加 :hover 的 box-shadow 通常无效——不是 CSS 写错了，而是图片默认是 display: inline，而 box-shadow 对纯 inline 元素不生效。
为什么 hover 阴影不触发
绝大多数“点击/悬停无反应”问题，根源不在伪类逻辑，而在盒模型基础。浏览器按规范禁止对 display: inline 元素渲染 box-shadow，哪怕你写了 img:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.2) }，它也根本不会计算、更不会绘制。
- 检查元素 computed style，确认
display值是不是仍是inline - 不要依赖父容器的 display 设置——必须作用在
<img alt="HTML怎么给图片加点击阴影_网页图片动态反馈【教程】" >自身 -
vertical-align在 inline 场景下会影响基线对齐，但不解决阴影缺失
正确写法：先改 display，再加 hover
只需两步，无需额外包裹或 JS：
- 给
<img alt="HTML怎么给图片加点击阴影_网页图片动态反馈【教程】" >显式设display: block或display: inline-block（图文混排推荐后者） - 再写
img:hover { box-shadow: ... }，参数照常配置 - 若用
inline-block，建议加vertical-align: middle避免文字被顶高
示例：
立即学习“前端免费学习笔记（深入）”；
img {
display: inline-block;
vertical-align: middle;
}
img:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
用 filter: drop-shadow() 实现更自然的点击反馈
当图片是 PNG/SVG 等带透明背景时，filter: drop-shadow() 比 box-shadow 更贴合轮廓，悬停时视觉更轻盈、不突兀：
- 它不依赖
display类型，inline图片也能直接用 - 语法固定：
filter: drop-shadow(<x-offset><y-offset><blur-radius><color>)</color></blur-radius></y-offset></x-offset>，四项缺一不可 - 不支持
inset，也不接受多层逗号写法（drop-shadow() drop-shadow()在 Safari 16.4 之前会失效）
示例（悬浮抬升感）：
img:hover {
filter: drop-shadow(0 6px 10px rgba(0,0,0,0.2));
}
容易忽略的边界问题
即使 display 和 hover 都写对了，阴影仍可能“消失”，重点排查这三点：
- 父容器有
overflow: hidden（比如卡片圆角容器），阴影区域被裁掉——临时加outline: 1px solid red可快速验证是否溢出 - 父容器用了
transform（如scale(0.95)或translateZ(0)），可能触发新层叠上下文，导致阴影截断 - 图片在 flex/grid 容器中，且
align-items: center未预留足够底部空间，阴影超出内容区被剪
修复优先级：加 padding-bottom 或调整 margin-bottom 预留空间，而不是删掉 overflow 或 transform。
