圆形图像上的CSS框阴影

Question

我试图在图片上添加淡出效果。 我使用了box-shadow（插图）。 有一个细长的圆圈（在我的浏览器中至少（在MacOS上为ff，chrome））盒子阴影开始了。 隐藏这个薄外圈的任何技巧？ 我尝试在div使用img元素并在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> 

Answer 2

可能的解决方法：将背景剪辑制作到内容框并设置最小填充。 这是一个例子：

 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; background-clip: content-box; padding: 1px; } 

 <div> </div> 

Answer 3

我不喜欢这个解决方案，但我建议它解决方法：

 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; margin: 0; box-sizing: border-box; } div::after { content: ""; display: block; width: calc(100% - 10px); height: calc(100% - 10px); border: solid 10px white; border-radius: 50%; position: relative; top: -5px; left: -5px; } 

 <div> </div>