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

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

이 CodePen은 Adam이 만듭니다. Argyle, 원래 다음을 통해 공유됨 트위터 트윗, 원뿔형 콘트롤을 사용하여 그라데이션부터 테두리를 만듭니다.

.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%)
  );
}

창의적으로 테리 먼 포크됨 Adam의 코드펜으로 CodePen입니다. 마우스를 위로 이동하여 자바스크립트 요소가 약간 필요해져서 그라데이션이 변경되는 것을 볼 수 있습니다 회전 각도를 저장하는 CSS 맞춤 속성을 업데이트합니다.

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

border-image-source

브라우저 지원

  • Chrome: 15. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 15. <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

소스

원뿔 그라데이션

브라우저 지원

  • Chrome: 69. <ph type="x-smartling-placeholder">
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: 83 <ph type="x-smartling-placeholder">
  • Safari 12.1. <ph type="x-smartling-placeholder">

소스