直接给<img>标签加box-shadow: inset无效，因其为inline元素；应使用容器实现内边框（padding+背景色）和外阴影（容器上设置box-shadow），并配合border-radius与overflow: hidden确保圆角效果。
直接给 <img> 标签加 box-shadow: inset 是无效的——这是最常踩的坑。图片默认是 inline 元素，而 CSS 规范明确规定 inset 阴影对纯 inline 元素不渲染。要实现“内边框 + 外阴影”的组合效果，必须换思路：用容器承载图片，再分别控制内外视觉层。
用外层容器实现内边框效果
所谓“内边框”，实际是让图片看起来像被一道细线从内部框住。这不是靠 border 实现的，而是用带 padding 的容器 + 背景色模拟：
- 给
<div class="img-wrapper">设置背景色（如浅灰或主题色）和内边距，比如padding: 4px - 图片本身设为
display: block; width: 100%; height: auto;，自动填满容器扣除 padding 后的空间 - 这样视觉上就形成了“图片边缘有一圈同色细线”的内边框感，干净又可控
给容器加外阴影，避开 img 的限制
把 box-shadow 写在包裹 <img> 的容器上，而不是图片本身：
- 容器需设
display: inline-block或block，确保阴影正常绘制 - 推荐写法：
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12)（轻微下移+柔和发散，自然不突兀） - 若需更精致，可叠加两层阴影：
box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.12)
圆角与阴影协同的关键细节
如果希望整体有圆角（比如卡片式设计），注意三点：
立即学习“前端免费学习笔记（深入）”；
- 容器设
border-radius: 8px，同时加overflow: hidden防止图片溢出圆角 - 阴影会自动跟随容器圆角，但模糊值（blur）别过大，否则边缘虚化会削弱“内边框”的清晰感；建议
blur-radius控制在 6–12px 之间 - 图片本身用
object-fit: cover保证不变形，尤其当容器宽高比和原图不一致时
完整可复用的代码示例
复制即用，已兼顾语义、响应式和视觉一致性：
.img-card {
display: inline-block;
border-radius: 8px;
overflow: hidden;
padding: 4px;
background: #f8f9fa; /* 模拟内边框底色 */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.img-card img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}HTML 中这样调用：<div class="img-card"><img src="photo.jpg" alt="描述"></div>
