border-image

보더 이미지를 지정합니다. border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat를 한 번에 지정하는 단축형 프로퍼티입니다.
border-collapse가 collapse인 요소에는 적용되지 않습니다.
CSS Level
CSS 3
상속
아니오

사용법

border-image: url('border.png') 30 30 round;
object.style.borderImage = "url(border.png) 30 30 round"

속성

border-image-source
이미지 파일을 지정합니다.
border-image-slice
보더 이미지를 9영역으로 나눕니다.
border-image-width
보더 이미지 영역을 9영역으로 나눕니다.
border-image-outset
보더 이미지를 보더 영역 밖으로 확장합니다.
border-image-repeat
보더 이미지의 반복 여부를 지정합니다.

원본이미지

<div style="width: 300px; height: 80px; border: 12px solid #f00; border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUJY5hDOsmiPXJkjcqEfTGPOWApVqtuh4vxgqNKfyfUfcaqMCDWncyo7sIqI4tImaVfKBT16xGpnvaJd9gKvu2I1qDs0RYVqtpb_rhBAkmHVxkdZixY5LNtBSoXhCV8gsqjYowLfeSDSI/s100/border.png') 12 fill">
<p>border-image</p>
</div>

border-image

댓글 없음:

댓글 쓰기

알립니다!

사이드바의 프로퍼티 목록 중 뒤에 별표(*)가 붙은 것은 CSS 3의 내용이 반영되지 않은 것입니다.

읽으신 글에 수정할 내용, 추가할 내용 등이 있다면 부담없이 댓글을 남겨 주세요.