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

#html #css #css3 #svg #box_shadow

Я пытаюсь создать несколько границ, которые плавно затухают вокруг изображения пользователя.
Я пишу 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



img {
  margin: 40px;
  width: 90px;
  border-radius: 50%;
  box-shadow:
    0 0 0 0 #817dd1,
    0 0 0 0 #5c58aa,
    0 0 0 0 #3d3a84,
    0 0 0 0 #211f56;
  cursor: pointer;
  transition: all .3s linear;
}

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







Анимация появления из центра | box-shadow



.img {
  margin: 40px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}

.img img {
  max-width: 100%;
  max-height: 100%;
  border-radius: inherit;
}

.img::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background: #817dd1;
  border-radius: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 0 #817dd1,
    0 0 0 13.3px #5c58aa,
    0 0 0 26.6px #3d3a84,
    0 0 0 40px #211f56;
  transition: all .3s linear;
  pointer-events: none;
}

.img:hover::after {
  width: 100%;
  height: 100%;
  background: transparent;
  box-shadow:
    0 0 0 10px #817dd1,
    0 0 0 20px #5c58aa,
    0 0 0 30px #3d3a84,
    0 0 0 40px #211f56;
}

  



Ответ 2

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



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 {
  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;

}



Ответ 3

Вы можете рассмотреть радиальный градиент и multiple backgrounds.   

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



.avatar {
  --r: 50px; /* Внутренний радиус */
  --d: 10px; /* Ширина границ */
  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 для изображения, чтобы избежать
 проблем по краям */

  border-radius: 50%;
  padding: 2px; /* Этот отступ используется с content-box для решения вопроса о крае*/
  box-sizing: border-box;
  display: inline-block; 
}

body {
  background: pink;
}









Вы также можете настроить размер изображения, чтобы покрыть только прозрачную часть: 



.avatar {
  --r: 50px; /* Внутренний радиус */
  --d: 10px; /* Ширина бордюра */
  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/calc(2*var(--r) + 2px) calc(2*var(--r) + 2px) no-repeat;

  border-radius: 50%;
  display: inline-block;
}

body {
  background: pink;
}









Я использую +1px / + 2px, чтобы избежать плохого эффекта из-за алиасинга.

Источник ответа: @Temani Afif


Ответ 4

SVG решение

Квадратную иконку аватара помещаем в круг:


           
         


Роль многоцветного бордюра выполняют окружности, окрашенные в разные цвета, как в
примере решения CSS  



	 




Примеры анимации бордюра


Появление бордюра вокруг иконки


Запуск анимации - клик по иконке









Бордюры открывают и окружают иконку   









Источник ответа: @Alexandr_TT