요소의 테두리에 적용될 이미지의 범위를 요소의 방향에 따라 좌표, 비율로 설정한다.
border-image-slice 속성에 사용되는 타입이다.
이미지의 상하좌우 가장자리에서 내부 오프셋을 지정하여 4개의 모서리, 4개의 가장자리 및 중앙의 9개 영역을 나누는 값을 나타낸다. 기본 값은 100%이다.
[<number [0,∞]> | <percentage [0,∞]>]{1,4} && fill?
<number [0,∞]><percentage [0,∞]>fill아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
정수 또는 실수를 표현한다.
어떠한 기준으로 부터 백분율로 표현한다.
테두리 이미지의 중간 부분이 유지된다. 요소의 내부 영역에 배경 이미지처럼 포함하여 표시한다.
다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.
border-image-slice: 100%;
기본 값이며 테두리로 사용될 이미지의 가로 또는 세로 전체를 테두리의 영역으로 잡는다.
border-image-slice: 20 30 40 50;
네 개의 숫자가 공백으로 구분되어 값으로 작성된 경우 첫번째 값은 top 을 가리키며 시계방향으로 차례대로 right, bottom, left 값을 갖는다. 이 네개의 값이 모서리에 사용될 이미지의 영역을 설정하게 된다.
border-image-slice: 20 30 40;
세 개의 숫자가 공백으로 구분되어 값으로 작성된 경우 첫번째 값은 top 을 가리키며 시계방향으로 차례대로 right, bottom 값을 갖는다. 생략된 네번째(left) 값은 두번째 값과 동일하게 처리된다. 이렇게 처리되는 네개의 값이 모서리에 사용될 이미지의 영역을 설정하게 된다.
border-image-slice: 20 30;
두 개의 숫자가 공백으로 구분되어 값으로 작성된 경우 첫번째 값은 top을 가리키며 차례대로 right 값을 갖는다. 생략된 세번째(bottom) 값은 첫번째 값으로, 네번째(left) 값은 두번째 값과 동일하게 처리된다. 이렇게 처리되는 네개의 값이 모서리에 사용될 이미지의 영역을 설정하게 된다.
object.style.borderImageSlice = "20%";
| Modules | ||
|---|---|---|
| Module Name | Status | Summary |
| CSS Backgrounds and Borders Module Level 3 | Last review date: 2022-7-9 | |