border-image-slice 속성

border-image-slice 속성은 브라우저에 이미지의 어떤 부분이 모서리로, 어떤 부분이 측면으로 갈지(그리고 어떤 부분이 중앙이 될지)를 지정합니다. 모서리에는 4 개의 부분이, 측면에는 4 개의 부분이 가며, 하나의 부분(중앙)은 요소의 배경으로 사용됩니다 (선택사항, 키워드 fill).

보다 자세한 정보는 border-image 속성을 참조하세요.

문법

<+css+> 선택자 { border-image-slice: 첫 번째부터 네 번째까지의 숫자 | 첫 번째부터 네 번째까지의 백분율; } <-css->

숫자와 백분율 뒤에는 공백을 두고 키워드 fill가 올 수 있습니다.

값

값	설명
백분율	백분율은 이미지 크기에 상대적으로 계산됩니다. 수평은 너비에, 수직은 높이에 상대적입니다.
숫자	숫자는 픽셀(래스터 이미지의 경우) 또는 좌표(벡터 이미지의 경우)입니다. 단위는 명시하지 않습니다.
`fill`	기본 동작은 이미지의 중앙 부분이 버려지는 것입니다. 이를 사용하려면, 숫자나 백분율에 추가하여 키워드 `fill`를 사용해야 합니다.

매개변수 개수

오프셋은 1, 2, 3 또는 4 개의 매개변수를 취할 수 있습니다. 오프셋에 대한 단위는 작성하지 않습니다 (예: 단순히 20, 20px가 아닙니다). 또한 % 단위로 두께를 지정할 수 있습니다.

매개변수 개수	설명
`1`	모든 측면에 대한 두께를 동시에 지정.
`2`	1 2; - 상단과 하단은 `1px`, 왼쪽과 오른쪽은 `2px`.
`3`	`1 2 3`; - 상단은 `1px`, 왼쪽과 오른쪽은 `2px`, 하단은 `3px`.
`4`	`1 2 3 4`; - 상단은 `1px`, 오른쪽은 `2px`, 하단은 `3px`, 왼쪽은 `4px`.

기본값: 100%(?).

예제

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

예제

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

참고 항목

테두리 이미지의 단축 속성인 border-image 속성
테두리용 이미지 경로를 지정하는 border-image-source 속성
테두리용 이미지 반복을 지정하는 border-image-repeat 속성
테두리용 이미지 크기를 지정하는 border-image-width 속성
테두리용 이미지 오프셋을 지정하는 border-image-outset 속성