border-image-slice

보더 이미지를 9등분 하도록 각 변으로부터의 옵셋 거리를 지정합니다. 1~4개의 값을 지정할 수 있으며, 윗쪽 방향에서의 옵셋 거리부터 시계방향으로 지정됩니다.
CSS Level
CSS 3
상속
아니오
기본값
100%

사용법

border-image-slice: 50% 50%;

border-image-slice: 50 fill;
object.style.borderImageSlice = "50% 50%";

속성

<Number>
래스터 이미지의 경우 픽셀 거리를 지정하고, 벡터 이미지인 경우에는 좌표를 지정합니다.
<%>
이미지의 크기에 대한 상대적인 크기를 지정합니다.
속성 값 뒤에 fill을 붙이면 9 등분의 이미지 중 가운데 부분도 배경을 채우도록 지정합니다. fill이 지정되지 않은 때에는 가운데 부분은 사용되지 않습니다.
음수 값은 사용할 수 없고, 이미지의 크기보다 큰 값인 때에는 100%로 간주됩니다.

border-image-slice: 25% 30% 12% 20%;

알립니다!

사이드바의 프로퍼티 목록 중 뒤에 별표(*)가 붙은 것은 CSS 3의 내용이 반영되지 않은 것입니다.

읽으신 글에 수정할 내용, 추가할 내용 등이 있다면 부담없이 댓글을 남겨 주세요.