CSS 참조 가이드

CSS @규칙(RULES)

CSS 속성 전체

CSS3 border-image-slice 속성 CSS3 border-image-outset 속성

CSS3 border-image-repeat 속성 사용 방법 및 예제

border-image-repeat CSS 속성은 경계선 이미지의 중간 부분을 어떻게 확대하거나 비스듬히 표시하여 경계선 크기를 맞추는지 지정합니다.

아래 표는 이 속성의 사용 설명과 버전 기록, 그리고 JavaScript 스크립트에서 이 속성의 사용 문법을 나타냅니다.

기본 값:	stretch
적용 대상:	모든 요소에 대해, 그러나 테이블 요소(예: tr, th, td)의 border-collapse 속성 값이 collapse 일 때 border-image-repeat 속성이 유효하지 않습니다. 그것도 적용됩니다.::first-letter。
상속:	아니요
애니메이션 가능:	아니요.보기: 애니메이션 속성。
버전:	CSS3의 새 기능
JavaScript 문법:	object.style.borderImageRepeat="round"

border-image-repeat 사용 문법

이 속성의 문법은 다음과 같습니다:

border-image-repeat: [ stretch | repeat | round | space ]　1　or　2　values | initial | inherit

아래 예제는 border를 사용하는 방법을 보여줍니다.-image-repeat 속성.

예제

.box {
　　　　width:　300px;
　　　　height:　150px;
　　　　border:　15px solid transparent;
　　　　border-image-source: url("border.png");
　　　　border-image-slice:　30;
　　　　border-image-repeat: round;
}

시험해 보세요‹/›

속성 값

아래 표는 이 속성의 값을 설명합니다.

값	설명
stretch	이미지가 확장되어 테두리 가장자리 간의 공간을 가득 채웁니다. 이는 기본 값입니다.
repeat	이미지가 기본적으로 패턴으로 반복되거나 확장되어 테두리 가장자리 간의 공간을 가득 채웁니다.
round	이미지가 기본적으로 패턴으로 반복되거나 확장되어 테두리 가장자리 간의 공간을 가득 채웁니다. 이 공간이 모든 타일을 채울 수 없는 경우, 이미지는 확장되어 채워집니다.
space	이미지가 기본적으로 패턴으로 반복되거나 확장되어 테두리 가장자리 간의 공간을 가득 채웁니다. 이 공간이 모든 타일을 채울 수 없는 경우, 남는 공간은 타일 주위에 분포됩니다.
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정된 경우, 관련 요소는 부모 요소의 border를 사용합니다.-image-repeat 속성의 계산 값.

브라우저 호환성

border-image-repeat 속성의 브라우저 호환성, 아래 표의 숫자는 이 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다; 모든 주요 브라우저는 이 속성을 지원합니다.

	Firefox 15+ Google Chrome15+ Internet Explorer 11+ Apple Safari 6+ Opera 15+

추가적인 읽기

교육 자료를 참조하세요:CSS3테두리，CSS 테두리。

CSS3 border-image-slice 속성 CSS3 border-image-outset 속성