원뿔 그래디언트를 사용해 멋진 테두리 만들기
bookmark_borderbookmark
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
원뿔형 그라데이션을 사용하면 이 멋진 테두리 예와 같은 흥미로운 효과를 만들 수 있습니다.
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
원뿔 그라데이션
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2022-05-27(UTC)
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2022-05-27(UTC)"],[],[]]