圆形图像上的 CSS 框阴影

Question

我试图在图片上添加淡出效果。我使用了 box-shadow(插图)。有一个细长的圆圈(至少在我的浏览器中(ff，MacOS 上的 chrome))是框阴影开始的地方。有什么技巧可以隐藏这个薄外圆？我尝试使用 img div 中的元素并在 div 上放置一个框阴影，但失败了。

div {
    background-image: url('https://www.welt.de/img/wirtschaft/mobile172774245/5812507447-ci102l-w1024/GERMANY-US-GABRIEL-MUSK-TESLA.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    box-shadow: inset 0 0 25px 25px #fff;
}

<div>
</div>

Answer 1

更多解决方法:放弃插入阴影并使用径向渐变背景:

div {
    background-image: radial-gradient(closest-side, transparent, transparent 80%, white), url('https://www.welt.de/img/wirtschaft/mobile172774245/5812507447-ci102l-w1024/GERMANY-US-GABRIEL-MUSK-TESLA.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 400px;
    height: 400px;
    border-radius: 50%;
 }

<div>
</div>