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

CSS에서 그라데이션 테두리를 얻는 방법

예상과는 달리 CSS 테두리에 그라데이션을 적용하는 것은 생각보다 간단하지 않습니다. 구문 border-color: -moz-linear-gradient(top, #555555, #111111); 직관적으로 보일 수 있지만 원하는 효과를 얻을 수 없습니다.

그래디언트 테두리를 성공적으로 생성하려면 border-style 및 border-width와 함께 border-image 속성을 활용해야 합니다. 다음 코드 조각은 이를 달성하는 방법을 보여줍니다.

.border {
  border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1;
  border-width: 4px;
  border-style: solid;
  padding: 5px;
}

이 코드를 다음과 같은 HTML 요소에 적용하면

<p class="border">border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1</p>

다음과 같은 그라데이션이 있는 테두리가 생성됩니다. 왼쪽에서 오른쪽으로, 지정된 테두리 너비에 걸쳐 있습니다. 이 컨텍스트에서는 border-radius가 작동하지 않습니다.

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