淡化图像的边框，没有框阴影

Question

我希望淡化图像的边框以平滑地混合到背景图像。

像这样：

互联网上的所有建议都是关于使用box-shadow插图并将相同的纯色设置为父元素，但它对我的情况不起作用。使用0.5-alpha左右的盒子阴影欺骗它也是无用的。

我该怎么办？喜欢CSS但可能需要canvas和javascript。

Answer 1

我会考虑使用伪元素复制图像，我应用模糊滤镜：

＆＃13;

＆＃13;

.box {
  width:400px;
  height:200px;
  background:var(--i);
  position:relative;
  overflow:hidden;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:30%;
  bottom:0;
  background-image:var(--i);
  background-position:right;
  filter:blur(20px);
}
.box:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:30%;
  bottom:0;
  background-image:var(--i);
  filter:blur(20px);
}

＆＃13;

<div class="box" style="--i:url(http://lorempixel.com/400/200/)">
</div>

＆＃13;

＆＃13;

＆＃13;