CSS box-shadow на круглом изображении

Question

Я пытался наложить эффект затухания на картинку.Я использовал box-shadow (вставка).Есть тонкий круг (по крайней мере, в моем браузере (ff, chrome на MacOS)), где начиналась тень от блока.Какие-нибудь хитрости, чтобы скрыть этот тонкий внешний круг?Я попытался использовать элемент 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: 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>

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: 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>