예제
<style>
#hz {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(https://www.w3.org/TR/css3-background/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 10px;
}
</style>
<p id="hz">홈짱닷컴 (Homzzang.com)</p>
결과보기
정의, 사용법
테두리 이미지의 너비를 지정
1. 기본 속성값: 1
2. 상속 여부: 상속 X
3. 애니메이션 여부: 가능 X
4. 도입: CSS3
5. JS구문: object.style.borderImageWidth="20px"
6. IE11 이상 최신 주요 브라우저
구문
선택자 {border-image-width: 속성값;}
속성값
px 단위
숫자 : border-width 너비값의 배수 의미. (기본값 1)
% 단위
auto : border-image-slice로 지정한 각 두께
initial : 기본 속성값으로 지정
inherit : 부모 요소의 속성값 상속
숫자 개수 별 의미
10px : 상, 우, 하, 좌 모두 10px
10px 20px : 상하 10px , 우좌 20px
10px 20px 30px : 상 10px , 우좌 20px, 하 30px
10px 20px 30px 40px : 상 10px , 우 20px , 하 30px , 좌 40px
