[border] CSS - border-image-repeat 속성 - 테두리 이미지 반복할지 늘릴지 선택 (= 보더이미지리피트속성, IE11)

border-image-repeat 예제

 

<style> 

#hz1 { 

  border: 15px solid transparent;

  padding: 15px;

  border-image-source: url(https://homzzang.com/img/css/border.png);

  border-image-repeat: repeat;

  border-image-slice: 30;

}

#hz2 { 

  border: 15px solid transparent;

  padding: 15px;

  border-image-source: url(https://homzzang.com/img/css/border.png);

  border-image-repeat: round;

  border-image-slice: 30;

}

#hz3 { 

  border: 15px solid transparent;

  padding: 15px;

  border-image-source: url(https://homzzang.com/img/css/border.png);

  border-image-repeat: stretch;  

  border-image-slice: 30;

}

</style>

<h2>border-image-repeat: repeat:</h2>

<p id="hz1">이미지는 영역을 채우도록 타일링 됨. 필요한 경우 타일이 나뉨.</p>

<h2>border-image-repeat: round:</h2>

<p id="hz2">이미지는 영역을 채우도록 타일링 됨. 타일 분할을 피하기 위해 필요한 경우 이미지 크기 조정.</p>

<h2>border-image-repeat: stretch (default):</h2>

<p id="hz3">이미지는 영역을 채우도록 늘어남</p>

<p>원래이미지:</p>

<img src="https://homzzang.com/img/css/border.png">

결과보기