[border] CSS - border-image-slice 속성 - 테두리이미지자르기 (IE11)

border-image-slice 예제

 

<style>

#hz_1 {

    border: 10px solid transparent;

    padding: 15px;

    border-image: url(https://www.w3.org/TR/css3-background/border.png) round;

    border-image-slice: 50;

}

#hz_2 {

    border: 10px solid transparent;

    padding: 15px;

    border-image: url(https://www.w3.org/TR/css3-background/border.png) round;

    border-image-slice: 20%;

}

#hz_3 {

    border: 10px solid transparent;

    padding: 15px;

    border-image: url(https://www.w3.org/TR/css3-background/border.png) round;

    border-image-slice: 30%;

}

</style>

<p id="hz_1">홈짱닷컴 (Homzzang.com) border-image-slice: 50;</p>

<p id="hz_2">홈짱닷컴 (Homzzang.com) border-image-slice: 20%;</p>

<p id="hz_3">홈짱닷컴 (Homzzang.com) border-image-slice: 30%;</p>

결과보기

border-image-slice 정의

 

border-image-source에 지정된 테두리 이미지를 어떻게 9등분 할지 지정

 

---

1.

기본적으로, 이미지를 9등분해서, 4개의 모퉁이, 4개의 변, 그리고 한가운데로 자름.

2.

4개의 모퉁이는 각각 테두리의 모퉁이로 보내고, 4개의 변은 테두리의 변으로 사용.

3.

일반적으로, 한가운데는 transparent (투명) 처리되어 보이지 않게 되지만,
속성값에 fill 키워드가 들어간 경우엔 사용됨.

 

4.

기본값: 100%
상속여부 : 상속 X
애니효과 : 가능 X
CSS버전 : CSS3
JS 구문 : object.style.borderImageSlice="30%"

5.

IE11 이상 주요 최신브라우저 지원

border-image-slice 구문

selector {border-image-slice: 속성값;}

 

---

 

숫자

px단위의 숫자. (주의: 적을 땐 따로 px  단위 입력 불필요)

% (백분율)
상대비율

 

fill

이미지의 한가운데를 보이게 할지 여부.

(예) border-image-slice:30% fill;

 

initial

속성값을 기본값으로 지정.

 

inherit

부모 요소의 속성값 상속.

 

---

 

속성값 개수별 의미

border-image-slice: 10;

(상단가로줄, 우측세로줄, 하단가로줄, 좌측세로줄) 모두 너비가 10px로 동일.

 

border-image-slice: 10 20;

(상단가로줄 하단가로줄) 10px  ,  (우측세로줄 좌측세로줄)  20px

 

border-image-slice: 10 20 30;

상단가로줄 10px , (우측세로줄, 좌측세로줄) 20px , 하단가로줄: 30px

 

border-image-slice: 10 20 30 40;

상단가로줄 10px, 우측세로줄 20px, 하단가로줄 30px, 좌측세로줄 40px