CSS 테두리 이미지 반복 속성
예시
테두리 이미지를 반복하는 방법을 지정합니다.
#borderimg
{
border-image-source: url(border.png);
border-image-repeat: repeat;
}
정의 및 사용
border-image-repeat속성은 테두리 이미지를 반복할지, 반올림할지, 간격을 두거나 늘릴지를 지정합니다 .
팁: 또한 border-image 속성(모든 border-image-* 속성을 설정하기 위한 약식 속성)을 살펴보십시오.
| 기본값: | 뻗기 |
|---|---|
| 상속: | 아니요 |
| 애니메이션 가능: | 아니요. 애니메이션 가능 에 대해 읽기 |
| 버전: | CSS3 |
| 자바스크립트 구문: | 개체 .style.borderImageRepeat="둥근" |
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Property | |||||
|---|---|---|---|---|---|
| border-image-repeat | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
CSS 구문
border-image-repeat: stretch|repeat|round|space|initial|inherit;
참고: 이 속성은 테두리 이미지의 측면과 중간 부분에 대한 이미지의 크기를 조정하고 바둑판식으로 배열하는 방법을 지정합니다. 따라서 여기에 두 개의 값을 지정할 수 있습니다. 두 번째 값이 생략되면 첫 번째 값과 동일한 것으로 간주됩니다.
속성 값
| Value | Description | Play it |
|---|---|---|
| stretch | Default value. The image is stretched to fill the area | |
| repeat | The image is tiled (repeated) to fill the area | |
| round | The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so it fits | |
| space | The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
관련 페이지
CSS 튜토리얼: CSS 테두리 이미지
CSS 참조: border-image 속성
CSS 참조: border-image-outset 속성
CSS 참조: border-image-slice 속성
CSS 참조: border-image-source 속성
CSS 참조: border-image-width 속성
HTML DOM 참조: borderImageRepeat 속성