원뿔 그라데이션을 사용하면 이 멋진 테두리 예와 같은 흥미로운 효과를 만들 수 있습니다.
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을 만들었습니다. 요소 위로 마우스를 이동하면 회전 각도를 저장하는 CSS 맞춤 속성을 업데이트하는 자바스크립트를 이용하여 그라데이션이 변경됩니다.
이 예에서는 border-image-source 속성을 사용합니다. 이 속성은 요소의 테두리를 만드는 데 사용되는 소스 이미지를 설정합니다. 이미지 값을 허용하는 다른 속성과 마찬가지로 모든 CSS 그라데이션 유형도 유효합니다.
border-image-source
원뿔 그라데이션