예제
<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
주소 복사
랜덤 이동