CSS 경계 이미지 슬라이스 속성

정의와 사용법

border-image-slice 속성은 이미지의 내부 이동을 정의합니다.

다른 것을 참조하십시오:

CSS3 강의:CSS3 테두리

예제

이미지의 내부 이동을 정의합니다:

div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}

CSS 문법

border-image-slice: number|%|fill;

주석:이 속성은 이미지의 상단, 오른쪽, 하단, 왼쪽边缘의 내부 이동을 정의하며, 이미지는 다섯 부분으로 나뉩니다: 네 가지角, 네 가지 변 및 중앙 부분. fill 키워드가 사용되지 않으면 중앙의 이미지 부분은 제거됩니다. 네 번째 값/퍼센트를 생략하면 두 번째 값과 같습니다. 세 번째 값을 생략하면 첫 번째 값과 같습니다. 두 번째 값을 생략하면 첫 번째 값과 같습니다.

속성 값

값 설명
number 숫자 값, 이미지 내 픽셀(래스터 이미지일 경우) 또는 벡터 좌표(벡터 이미지일 경우)를 나타냅니다.
% 이미지 크기에 비례한 퍼센트 값: 이미지의 너비는 수평 이동에 영향을 미치고, 높이는 수직 이동에 영향을 미칩니다.
fill 백그라운드 이미지의 중앙 부분을 유지합니다.

기술 세부 사항

기본 값: 100%
상속성: no
버전: CSS3
JavaScript 문법: object.style.borderImageSlice="50% 50%"

브라우저 지원

표中的数字은 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

크롬 IE / 엣지 파이어폭스 사파리 오페라
15.0 11.0 15.0 6.0 15.0

참조하십시오 border-image 속성.