HTML怎么设置图片内阴影_网页图片凹陷效果【案例】-html教程-PHP中文网

img元素不支持inset阴影是规范限制而非bug，需用div容器包裹并设置overflow:hidden、固定宽高来实现可靠内凹效果。

html怎么设置图片内阴影_网页图片凹陷效果【案例】

直接用 box-shadow 加 inset 就能实现图片内阴影（即“凹陷”视觉效果），但必须注意：<img> 是替换元素，不支持 inset 阴影直接生效——得包一层容器。

为什么 `img` 不能直接加 `inset` 阴影

浏览器对 <img> 的渲染限制导致 box-shadow: inset ... 在它身上被忽略。这不是 bug，是规范行为。你看到阴影没反应，不是写错了，是根本不会画。

验证方式：给 <img> 加 box-shadow: inset 0 0 10px red;，DevTools 里能看到样式生效，但页面无变化
替代方案只有两种：套 <div> 容器，或改用 <code>background-image
如果图是语义关键内容（比如头像、商品图），优先选容器包裹法，不破坏 alt 和可访问性

用 `div` 包裹实现可靠内凹效果

把 <img> 放进一个 <div>，对这个 <code><div> 应用 <code>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 状态，但实际交互中容易出现阴影跳动、边缘闪烁，核心原因是：阴影改变了元素的渲染层叠或触发了重排。

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

确保容器有固定宽高，不要依赖图片加载后 JS 动态计算——否则 hover 瞬间会抖
避免在 hover 中同时修改 transform 和 box-shadow，尤其当用了 translateZ 时，可能触发不同合成层，造成阴影错位
若需更真实凹陷感，可叠加 inset 阴影 + 微调 border 暗边：border-bottom: 2px solid #666 模拟受光面差异