• Q&A
  • 회원가입
  • 로그인

[border] CSS - border-image-width - (테두리 이미지 너비) - IE 11

1,352  


예제


<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



찾아주셔서 감사합니다. Since 2012