border-image

정의 및 사용

border-image 속성은 테두리에 이미지를 배경처럼 적용하는 속성으로 css3에서 새로 생긴 border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat 같은 속성들의 축약속성이다.

정의 및 사용
기본값 각 속성값 참고
상속 no
버전 CSS3
자바스크립트 구문 object.style.borderImage=”url(border.png) 30 30 round”

브라우저 지원

IE6 지원 안함IE7 지원 안함IE8 지원 안함Chrome 지원Firefox 지원Opera 지원Safari 지원

각 속성별로 지원 여부가 다르며 지원하는 속성도 각 브라우저별 접두사를 사용해야 한다. IE계열은 지원하지 않는다.(-moz- 파이어폭스, -o- 오페라, -webkit- 사파리와 크롬)

구문

속성 값 설명
설명
border-image-source 이미지의 경로를 지정하는 속성
border-image-slice
border-image-width 이미지 테두리의 너비값을 지정하는 속성
border-image-outset 이미지의 위치를 지정한 거리만큼 바깥으로 위치시키는 속성
border-image-repeat 이미지의 반복 여부를 지정하는 속성

예제

버그 및 이슈

소제목

목록 으로

댓글