CSS에서 그라데이션 테두리가 있는 둥근 모서리를 어떻게 만들 수 있나요?

테두리 반경 및 그라데이션 테두리 이미지 구현

둥근 테두리와 그라데이션을 사용하여 요소의 스타일을 지정하는 것은 어려울 수 있습니다. border-radius와 border-image 속성을 모두 결합하려고 하면 그라데이션 없이 둥근 모서리가 나타나거나 둥근 모서리 없이 그라데이션 테두리가 나타나는 경우가 많습니다.

해결책:

다행히도 CSS 기술을 조합하여 둥근 모서리와 그라데이션 테두리를 모두 얻을 수 있습니다. 보다 간결한 접근 방식을 제공하는 SVG가 아닌 솔루션은 다음과 같습니다.

div {
  width: 300px;
  height: 80px;
  border: double 1em transparent;
  border-radius: 30px;
  background-image: linear-gradient(white, white),
                    linear-gradient(to right, green, gold);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

설명:

• 투명한 이중 테두리는 너비를 설정하고 이니셜을 제거합니다. 테두리 색상.
• 배경 이미지 속성은 시작 부분의 흰색 그라데이션과 컬러 그라데이션의 두 가지 그라데이션을 생성합니다.
• background-origin: border-box는 둥근 모서리에 맞춰 테두리에 그라데이션을 배치합니다.
• background-clip: 콘텐츠 상자, 테두리 상자 컨트롤 그라디언트가 잘리는 방법을 사용하여 테두리는 그라디언트로 채워지고 내부 영역은 흰색으로 유지됩니다.

이 기술을 사용하면 둥근 모양을 세련되게 결합할 수 있습니다. 모서리와 그라데이션 테두리.

위 내용은 CSS에서 그라데이션 테두리가 있는 둥근 모서리를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!