CSS 박스 경계 이미지 반복 속성

정의와 사용법

border-image-repeat 속성은 이미지 테두리가 반복되어야 하는지, 확장되어야 하는지, 또는 둥글게 채워져야 하는지 정의합니다.

추가로 참조하십시오:

CSS3 강의:CSS3 테두리

예제

이미지 테두리를 어떻게 반복할지 정의합니다:

div
{
border-image-source: url(border.png);
border-image-repeat: round;
}

CSS 문법

border-image-repeat: stretch|repeat|round;

비고:이 속성은 테두리 이미지의 가장자리와 중간 부분을 어떻게 확장하고 배치할지 정의합니다. 따라서 두 가지 값을 지정할 수 있습니다. 두 번째 값이 누락되면 첫 번째 값과 같은 값을 취합니다.

속성 값

값 설명
stretch 영역을 채우기 위해 이미지를 확장합니다
repeat 영역을 채우기 위해 이미지를 패턴으로 반복합니다.
round repeat 값과 유사합니다. 모든 이미지를 완전히 패턴으로 만들 수 없다면, 이미지를 확대하여 영역에 맞춥니다.

기술 세부 사항

기본 값: stretch
상속성: no
버전: CSS3
JavaScript 문법: object.style.borderImageRepeat="round"

브라우저 지원

표에서의 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

크롬 IE / 엣지 파이어폭스 사파리 오페라
15.0 11.0 15.0 6.0 15.0

참조하십시오 border-image 속성.