border-image-slice는 CSS의 그라데이션 배경과 어떻게 작동합니까?

그라디언트 배경의 테두리 이미지: 숫자 80 이해

CSS에서 border-image를 사용하면 래스터 또는 벡터 이미지를 다음과 같이 사용할 수 있습니다. 요소 주위의 테두리. 제공된 코드에서 볼 수 있듯이 그라데이션 배경에 적용될 때 구문은 border-image-slice 속성이 작동하는 방식에 대해 몇 가지 질문을 남길 수 있습니다.

CSS 사양에 따르면 border-image-slice는 래스터 이미지의 가장자리 오프셋(픽셀)입니다. 그러나 그라데이션 배경의 경우 요소의 크기에 상대적입니다.

제공된 예에서 border-image-slice 값은 80으로 설정됩니다. 이 값은 단위가 없으므로 가정됩니다. 픽셀 단위로 표시됩니다. 따라서 이 경우 테두리를 만드는 데 사용할 이미지의 크기는 80px입니다.

border-image-width 속성은 테두리의 너비를 정의합니다. 이 예에서는 요소 글꼴 크기의 대략 5배인 5em으로 설정되었습니다. 즉, 테두리의 폭은 모든 면에서 5em입니다.

이러한 값이 어떻게 상호 작용하는지 이해하는 열쇠는 초기 이미지의 크기가 테두리 크기에 맞게 조정된다는 점을 인식하는 것입니다. 이 경우 초기 이미지는 그라데이션 배경입니다. 따라서 그라데이션 배경은 너비 80px, 높이 5em로 크기가 조정됩니다.

그런 다음 border-image-slice 속성은 이 크기가 조정된 이미지를 9개 영역으로 분할하는 방법을 정의합니다. 그런 다음 이러한 영역은 다음과 같이 요소 주위에 배치됩니다.

• 상단 및 왼쪽 영역은 테두리의 상단/왼쪽 모서리로 배치됩니다.
• 하단 및 오른쪽 영역은 배치됩니다.
• 상단/하단 양쪽 영역이 테두리 너비에 맞게 늘어납니다.
• 왼쪽 양쪽 영역 /right는 테두리 높이에 맞게 늘어납니다.

따라서 이 예에서 border-image-slice 값이 80px는 크기가 조정된 그라데이션 배경이 9개의 80px 정사각형으로 분할된다는 의미입니다. 그러면 위에서 설명한 대로 이러한 사각형이 요소 주위에 배치되어 테두리를 형성합니다.

border-image-slice 및 border-image-width 값을 조정하여 테두리의 모양을 제어할 수 있습니다. 다양한 값을 실험해 보면 원하는 디자인 효과를 얻는 데 도움이 될 수 있습니다.

위 내용은 border-image-slice는 CSS의 그라데이션 배경과 어떻게 작동합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!