멋진 장식을 위해 마법을 사용 border-image하고 이미지에 원하는 만큼 테두리를 추가

멋진 장식을 위해 마법을 사용 border-image하고 이미지에 원하는 만큼 테두리를 추가하세요.

• 추가 요소 없음 및 의사 요소 없음
• 그라데이션 하나만
• CSS 변수로 최적화됨

img {
  --s: 200px; /* image size */
  --b: 14px;  /* control the border thickness */
  --n: 5;     /* number of borders */
  --c: #774F38;
  
  width: var(--s);
  --_p:calc(var(--b)*var(--n));
  --_d:calc(var(--s)/(2*var(--n)) + var(--b));
  padding: var(--_p);
  border-radius: calc(var(--_p) + var(--b)/4);
  border-image:
    repeating-radial-gradient(
       var(--c) 0,#0000 2px calc(var(--_d)/2 - 2px),
       var(--c) calc(var(--_d)/2) var(--_d))
    49.8%/var(--_p);
  clip-path: inset(0 round var(--_p))
}