원뿔 그래디언트를 사용해 멋진 테두리 만들기

원뿔형 그라데이션을 사용하면 이 멋진 테두리 예와 같은 흥미로운 효과를 만들 수 있습니다.

Adam Argyle님이 만들고 트위터의 이 트윗을 통해 처음 공유한 이 CodePen은 원뿔형 그라데이션을 사용하여 테두리를 만드는 방법을 보여줍니다.

.conic-gradient-border {
  border: 25px solid;
  border-image-slice: 1;
  border-image-source: conic-gradient(
    hsl(100 100% 60%),
    hsl(200 100% 60%),
    hsl(100 100% 60%)
  );
}

테리 먼님이 창의적으로 아담의 CodePen을 포크하여 이 CodePen을 만들었습니다. 요소 위로 마우스를 가져가면 회전 각도를 저장하는 CSS 맞춤 속성을 업데이트하는 약간의 JavaScript 덕분에 그라데이션이 변경되는 것을 볼 수 있습니다.

이 예에서는 border-image-source 속성을 사용합니다. 이 속성은 요소의 테두리를 만드는 데 사용되는 소스 이미지를 설정합니다. 이미지 값을 허용하는 다른 속성과 마찬가지로 모든 CSS 그라데이션 유형도 유효합니다.

border-image-source

브라우저 지원

• 15
• 12
• 15
• 6

소스

원뿔 그라데이션