그라디언트 테두리는 웹 요소에 고유한 느낌을 추가하지만 테두리 이미지가 요소와 상호 작용하는 방식을 이해하는 것은 수수께끼.
CSS에서 border-image-slice는 테두리 이미지를 9개 영역으로 슬라이싱하는 것을 정의합니다. 그라데이션 테두리의 경우 이미지 크기는 요소의 크기와 같습니다. border-image-width가 지정되지 않은 경우 border-width는 영역을 정의하는 데 사용됩니다.
원하는 효과를 얻으려면 border- image-slice는 픽셀 단위로 border-image-width(또는 단위로 지정되지 않은 경우 border-width)와 동일해야 합니다.
border-image-slice의 단위 없는 값은 다음과 같습니다. 픽셀 값을 고려합니다.
border-image-slice의 백분율 값은 요소의 크기에 따라 결정됩니다.
귀하의 예에서는 border-image-slice가 80으로 설정된 경우:
[이미지 그라데이션 테두리 슬라이싱]
그라디언트 테두리에 대한 완벽한 슬라이싱을 얻으려면:
위 내용은 border-image-slice를 사용하여 그라데이션 테두리를 완벽하게 슬라이싱하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!