CSS 경계 이미지 속성

정의와 사용법

border-image 속성은 다음 속성을 설정하는 간단한 속성입니다:

값을 생략하면 기본 값이 설정됩니다.

힌트:border-image-* 속성을 사용하여 아름다운 확장 가능한 버튼을 만들어 보세요!

추가로 참조:

CSS3 강의:CSS3 테두리

实例

이미지를 div 요소의 경계선으로 정의합니다:

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

개인적으로 시도해 보세요

페이지 하단에 더 많은 예제가 있습니다.

CSS 문법

border-image: source slice width outset repeat|initial|inherit;

속성 값

값 설명 테스트
border-image-source 경계선에 사용되는 이미지의 경로.
border-image-slice 이미지 경계선이 내부로 이동.
border-image-width 이미지 경계선의 너비.
border-image-outset 경계선 이미지 영역이 경계선을 초과하는 양.
border-image-repeat 이미지 경계선이 반복(repeated)、둥글게(rounded)되거나 확장(stretched)되어야 합니까? 테스트

기술 세부 사항

기본 값: none 100% 1 0 stretch
상속성: no
버전: CSS3
JavaScript 문법: object

更多实例

Border-image 버튼
border-image 속성을 통해 버튼을 생성하는 방법을 보여줍니다.

브라우저 지원

표中的 숫자는 이 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

Chrome IE / Edge Firefox Safari 오페라
16.0
4.0 -webkit-		 11.0 15.0
3.5 -moz-		 6.0
3.1 -webkit-		 15.0
11.0 -o-