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">
결과보기
