img元素不支持inset阴影是规范限制而非bug，需用div容器包裹并设置overflow:hidden、固定宽高来实现可靠内凹效果。
直接用 box-shadow 加 inset 就能实现图片内阴影（即“凹陷”视觉效果），但必须注意：<img> 是替换元素，不支持 inset 阴影直接生效——得包一层容器。
为什么 img 不能直接加 inset 阴影
浏览器对 <img> 的渲染限制导致 box-shadow: inset ... 在它身上被忽略。这不是 bug，是规范行为。你看到阴影没反应，不是写错了，是根本不会画。
- 验证方式：给
<img>加box-shadow: inset 0 0 10px red;，DevTools 里能看到样式生效，但页面无变化 - 替代方案只有两种：套
<div>容器，或改用background-image - 如果图是语义关键内容（比如头像、商品图），优先选容器包裹法，不破坏
alt和可访问性
用 div 包裹实现可靠内凹效果
把 <img> 放进一个 <div>，对这个 <div> 应用 inset 阴影，并控制溢出和尺寸对齐。
- 容器需设
overflow: hidden，否则阴影可能溢出边缘 -
width/height必须显式设置，且与图片原始宽高一致（或用aspect-ratio控制） - 推荐加
display: inline-block避免行内默认基线对齐带来的底部空隙
.img-container {
width: 200px;
height: 150px;
overflow: hidden;
display: inline-block;
box-shadow: inset 0 4px 8px rgba(0,0,0,0.2);
}
.img-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
hover 触发凹陷时的常见错位问题
很多教程只写 :hover 状态，但实际交互中容易出现阴影跳动、边缘闪烁，核心原因是：阴影改变了元素的渲染层叠或触发了重排。
立即学习“前端免费学习笔记（深入）”；
- 确保容器有固定宽高，不要依赖图片加载后 JS 动态计算——否则 hover 瞬间会抖
- 避免在 hover 中同时修改
transform和box-shadow，尤其当用了translateZ时，可能触发不同合成层，造成阴影错位 - 若需更真实凹陷感，可叠加
inset阴影 + 微调border暗边：border-bottom: 2px solid #666模拟受光面差异
移动端适配时的模糊与性能陷阱
在 iOS Safari 或部分 Android WebView 中，inset 阴影可能出现边缘锯齿或渲染延迟，尤其搭配 filter: blur() 时。
- 慎用
inset配合大值模糊半径（如blur(12px)），低端设备易卡顿 - 可用
backface-visibility: hidden强制硬件加速，但仅对含transform的元素有效 - 真正要兼顾性能和效果，建议用 SVG 蒙版 +
mask属性替代，不过兼容性略低（iOS 15.4+ 才稳定支持mask-image）
最常被忽略的一点：凹陷效果本质是光影暗示，不是越深越好。过度使用 inset 阴影会让图片像被挖掉一块，而不是“压进去”。建议从 inset 0 2px 4px rgba(0,0,0,0.15) 起手，再按实际背景明暗微调透明度。
