如何为行内img标签添加模糊边角？实现背景图同款样式

我懂你的困扰——你用box-shadow: inset给背景图实现了那种中间清晰、边角被白色模糊覆盖的效果，但直接把同样样式套在<img>标签上完全没反应对吧？这是因为img属于替换元素，它的图片内容会完全覆盖掉元素自身的背景和内阴影，所以你看不到任何效果。

下面给你几个可行的解决方案，都能让img达到和背景图一致的模糊边角效果：

方案1：用容器包裹img，给容器加inset阴影 #

这是最直接且兼容性最好的方法，把img放在和它尺寸一致的容器里，给容器设置你原本的inset阴影样式，让阴影覆盖在img的边角上：

<div class="img-container">
  <img src="http://via.placeholder.com/350x150" alt="示例图">
</div>

<style>
.img-container {
  width: 350px;
  height: 150px;
  overflow: hidden;
  /* 你的模糊边角样式 */
  box-shadow: 25px 25px 50px 0 white inset, -25px -25px 50px 0 white inset;
}
.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，避免拉伸变形 */
}
</style>

方案2：使用CSS mask实现模糊边角 #

如果不想额外添加容器，可以用CSS mask来实现类似效果，原理是用渐变创建一个中间透明、边角过渡模糊的遮罩层覆盖在img上：

<img src="http://via.placeholder.com/350x150" class="masked-img" alt="示例图">

<style>
.masked-img {
  width: 350px;
  height: 150px;
  /* 创建中心透明、边角渐变为白色的径向渐变遮罩 */
  mask: radial-gradient(circle at center, transparent 60%, white 100%);
  /* 兼容webkit内核浏览器 */
  -webkit-mask: radial-gradient(circle at center, transparent 60%, white 100%);
}
</style>

你可以调整渐变的百分比（比如把60%改成70%）来控制模糊边角的范围，效果和你的box-shadow方案高度接近。

方案3：用伪元素+filter组合实现（可选） #

另一种思路是给img的父容器添加伪元素，在伪元素上设置白色模糊效果，定位到四个边角位置：

<div class="img-wrapper">
  <img src="http://via.placeholder.com/350x150" alt="示例图">
</div>

<style>
.img-wrapper {
  width: 350px;
  height: 150px;
  position: relative;
  overflow: hidden;
}
.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 四个边角的白色圆形模糊区域 */
  background: 
    radial-gradient(circle at top left, white 25px, transparent 25px),
    radial-gradient(circle at top right, white 25px, transparent 25px),
    radial-gradient(circle at bottom left, white 25px, transparent 25px),
    radial-gradient(circle at bottom right, white 25px, transparent 25px);
  background-size: 50% 50%;
  background-repeat: no-repeat;
  filter: blur(10px); /* 调整模糊程度 */
}
</style>

三个方案里，方案1适配性最强，方案2代码最简洁，你可以根据自己的项目需求选择~

内容的提问来源于stack exchange，提问作者Ylama