带有模糊角的html图像标签[重复]

【问题标题】：html image tag with blur corners [duplicate]带有模糊角的html图像标签[重复]
【发布时间】：2018-04-23 21:13:12
【问题描述】：

我只是想为内联图像标签添加模糊角，但它不起作用。

我希望内联图像标记为background 图像标记设置样式，如下所示，这将如何完成？

.test {
  background: url(http://via.placeholder.com/350x150) left top no-repeat;
  box-shadow: 25px 25px 50px 0 white inset, -25px -25px 50px 0 white inset;
  width: 350px;
  height: 150px;
}

img {
  box-shadow: 25px 25px 50px 0 white inset, -25px -25px 50px 0 white inset;
  width: 350px;
  height: 150px;
}

<img src="http://via.placeholder.com/350x150" class="img-fluid" alt="Responsive image">

<div class="test"></div>

【问题讨论】：

不确定我们是否可以用 img 元素做嵌入阴影
是的@TemaniAfif 我这就是我问的原因

标签： html css

【解决方案1】：

您可以使用一个技巧，创建一个容器并在您的图像上放置一个可以伪造模糊效果的图层。

根据这个LINK，我只使用了div 而不是a。

工作版本

.test {
  background: url(http://via.placeholder.com/350x150) left top no-repeat;
  box-shadow: 25px 25px 50px 0 white inset, -25px -25px 50px 0 white inset; 
  width: 350px;
  height: 150px;
}

.image-container {
  position: relative;
  float: left;
}
.image-container::before {
  position: absolute;
  content: '';
  top: 0; bottom: 0; left: 0; right: 0;
  box-shadow: 25px 25px 50px 0 white inset, -25px -25px 50px 0 white inset;
}
.image-container img {
  float: left;
}

<div class="image-container">
  <img src="http://via.placeholder.com/350x150" class="img-fluid" alt="Responsive image">
</div>
<br style="clear:both" />
<div class="test"></div>

【讨论】：