Что такое хороший способ написать CSS для нескольких границ?

Я пытаюсь построить несколько границ, которые исчезают вокруг изображения пользователя. Я пишу CSS, как это, но это не поможет:

width: 90px;
border-radius: 50%;
box-shadow:
inset 0 0 0 4px #eee,
inset 0 0 0 8px #ddd,
inset 0 0 0 12px #ccc,
inset 0 0 0 16px #bbb,
inset 0 0 0 20px #aaa,
inset 0 0 0 20px #999,
inset 0 0 0 20px #888;

Но это не дает результат, как ожидалось. Как мне этого добиться?

Ответ 1

Используйте box-shadow с border-radius

box-shadow:
  0 0 0 10px #817dd1,
  0 0 0 20px #5c58aa,
  0 0 0 30px #3d3a84,
  0 0 0 40px #211f56;

img {
  margin: 40px;
  width: 90px;
  border-radius: 50%;
  box-shadow:
    0 0 0 10px #817dd1,
    0 0 0 20px #5c58aa,
    0 0 0 30px #3d3a84,
    0 0 0 40px #211f56;
}
div {
  background: #100f35;
  width: 170px;
}

<div>
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar">
</div>

Ответ 2

Вы можете рассмотреть radial-gradient и несколько фонов.

Я использовал CSS-переменные, чтобы иметь возможность легко контролировать форму (изображение, радиус, длину границы и т.д.):

.avatar {
  --r: 50px; /* The inner radius */
  --d: 10px; /* The length of borders */
  width: calc(2*(var(--r) + 4*var(--d) + 1px));
  height: calc(2*(var(--r) + 4*var(--d) + 1px));
  background:
    radial-gradient(
      transparent var(--r),
      #eee calc(var(--r) + 0*var(--d) + 1px), #eee calc(var(--r) + 1*var(--d)),
      #ddd calc(var(--r) + 1*var(--d) + 1px), #ddd calc(var(--r) + 2*var(--d)),
      #ccc calc(var(--r) + 2*var(--d) + 1px), #ccc calc(var(--r) + 3*var(--d)),
      #bbb calc(var(--r) + 3*var(--d) + 1px), #bbb calc(var(--r) + 4*var(--d)),
      transparent calc(var(--r) + 4*var(--d) + 1px)),
    var(--im) center/cover content-box; /* content-box for the image to avoid edge issues */

  border-radius: 50%;
  padding: 2px; /* This padding is used with the content-box for the edge issue*/
  box-sizing: border-box;
  display: inline-block;
}

body {
  background: pink;
}

<div class="avatar" style="--im:url(https://picsum.photos/id/1074/800/800)"></div>

<div class="avatar" style="--im:url(https://picsum.photos/id/1069/800/800);--r:20px;"></div>

<div class="avatar" style="--im:url(https://picsum.photos/id/237/800/800);--r:60px;--d:18px;"></div>

Ответ 3

Тень от inset (та, которую вы пытались использовать в вашем примере) не будет рисоваться поверх изображения. Вы можете расположить элемент поверх изображения, которое содержит тень от вставки, или, лучше, фоновое изображение с радиальным градиентом:

.picture {
  display: inline-block;
  position: relative;
}

.picture img {
  vertical-align: bottom;
}

.picture::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: radial-gradient(circle closest-side,
    transparent 49%,
    #999 50%, #999 59%,
    #aaa 60%, #aaa 69%,
    #bbb 70%, #bbb 79%,
    #ccc 80%, #ccc 89%,
    #ddd 90%, #ddd 99%,
    #eee 100%
  );
}

<div class="picture">
  <img src="https://picsum.photos/id/237/256/256">
</div>