用box-shadow inset给图片加淡色内阴影需借助容器或伪元素：方法一用父div设内阴影并隐藏溢出；方法二用径向渐变伪元素模拟柔和光感；关键参数为低透明度黑、10–25px模糊值、零偏移、搭配圆角。
用 CSS 的 box-shadow 配合 inset 关键字，就能给图片加淡色内阴影——但要注意：图片本身不支持直接内阴影，得套一层容器或用伪元素“骗过”浏览器。
方法一：用父容器包裹图片（推荐，兼容性好）
给图片外层加一个 <div>，设置内阴影在容器上，再让图片略小于容器、背景透明，阴影就自然“透”出来：
- HTML 结构：
<div class="img-shadow"><img src="xxx.jpg" alt=""></div> - CSS 样式：
.img-shadow {
width: 300px;
height: 200px;
background: #f9f9f9;
box-shadow: inset 0 0 20px rgba(0,0,0,0.08);
overflow: hidden;
}
.img-shadow img {
width: 100%;
height: 100%;
object-fit: cover;
} - 关键点：背景色要浅（如 #f9f9f9），阴影用低透明度黑（
rgba(0,0,0,0.05~0.1)），避免发灰；overflow: hidden防止图片撑出阴影边界。
方法二：用伪元素模拟内阴影（更灵活，适合纯图场景）
不改 HTML 结构，只靠 CSS 给 <img> 添加 ::before 伪元素，盖在图片上并加内阴影效果：
- CSS 样式：
img.shadow-inset {
position: relative;
display: inline-block;
}
img.shadow-inset::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: radial-gradient(circle at center, rgba(255,255,255,0.3) 0%, transparent 70%);
z-index: 1;
}
img.shadow-inset {
z-index: 0;
} - 这不是传统 box-shadow，而是用径向渐变模拟“中心亮、边缘微暗”的柔和内光感，视觉上更轻盈自然；适合需要呼吸感的卡片图、头像等。
小技巧：调出“干净淡雅”的关键参数
-
颜色选浅灰或白底+极低黑透明度：比如
rgba(0,0,0,0.04)比rgba(0,0,0,0.1)更显干净 -
模糊值别太大：
10px ~ 25px足够，超过 30px 容易发虚失焦 -
避免偏移量（x/y）：内阴影保持
inset 0 0 blur spread，有偏移会像“浮起”，破坏内嵌感 -
搭配圆角一起用：给容器加
border-radius: 8px，阴影会自动贴合，质感立刻提升
