Javascript 无框阴影图像的淡入边界

我想淡入图像的边界，以平滑地混合到背景图像中

像这样：

互联网上的所有建议都是关于使用框阴影插入，并为父元素设置相同的纯色，但这对我的情况不起作用。使用0.5 alpha左右的方块阴影的技巧也是无用的

---

我能做什么？更喜欢CSS，但可能是画布，JavaScript可能是必要的。

< P>我会考虑用伪元素复制图像，在这里我使用模糊过滤器：

.box{
宽度：400px；
高度：200px；
背景：var（--i）；
位置：相对位置；
溢出：隐藏；
}
.盒子：以前{
内容：“；
位置：绝对位置；
排名：0；
右：0；
宽度：30%；
底部：0；
背景图像：var（--i）；
背景位置：右；
过滤器：模糊（20px）；
}
.盒子：之后{
内容：“；
位置：绝对位置；
排名：0；
左：0；
宽度：30%；
底部：0；
背景图像：var（--i）；
过滤器：模糊（20px）；
}

好的，谢谢你给我的雷达带来了剪辑路径，但是这个片段在内部图像中保留了硬边界，我尽量避免。@menigonzalez_uuz-你是说内部的硬边界是什么？这是代码段的呈现。正如您所看到的，与我的示例不同，边界并不柔软。@menigonzalez_uok添加了另一种方式；）没有夹子，那很酷，伙计。毕竟这是一个简单的解决方案，但在网站记录中没有人知道答案。谢谢