예
국경 이미지를 반복하는 방법을 지정합니다 :
#borderimg
{
border-image-source: url(border.png);
border-image-repeat: repeat;
}
»그것을 자신을 시도 정의 및 사용
테두리 이미지 반복 속성은 테두리 이미지가 반복 반올림 또는 신장해야하는지 여부를 지정합니다.
팁 : 또한보고 경계 이미지 속성 (a shorthand property for setting all the border-image-* properties) .
기본값: | stretch |
---|---|
상속 : | no |
애니메이션 : | no. Read about animatable |
번역: | CSS3 |
자바 스크립트 구문 : | object .style.borderImageRepeat="round" Try it |
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
재산 | |||||
---|---|---|---|---|---|
border-image-repeat | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
CSS 구문
border-image-repeat: stretch|repeat|round|initial|inherit;
Note: 이 속성은 측면과 국경 이미지의 중간 부분에 대한 이미지 스케일링 및 바둑판 식으로 배열하는 방법을 지정합니다. 그래서, 당신은 여기에 두 개의 값을 지정할 수 있습니다. 두 번째 값이 생략 된 경우, 상기 제와 동일한 것으로 가정된다.
속성 값
값 | 기술 | 플레이 |
---|---|---|
stretch | 기본값. 이미지는 영역을 채울 연신 | »플레이 |
repeat | 이미지가 바둑판 식으로 배열된다 (repeated) 영역을 채우기 위해 | »플레이 |
round | 이미지가 바둑판 식으로 배열된다 (repeated) 영역을 채우기 위해. 이 타일의 전체 수와 면적을 채우지 않는 경우가 들어가도록 상기 화상 재배 율화된다 | »플레이 |
space | 이미지가 바둑판 식으로 배열된다 (repeated) 영역을 채우기 위해. 이 타일의 전체 숫자로 영역을 작성하지 않으면, 여분의 공간은 타일 주위 분포 | |
initial | 기본값으로이 속성을 설정합니다. 초기에 대해 알아보기 | »플레이 |
inherit | 부모 요소에서이 속성을 상속합니다. 대한 상속 읽기 |
관련 페이지
CSS3 튜토리얼 : CSS3 테두리 이미지
CSS 참조 : border-image property
CSS 참조 : border-image-outset property
CSS 참조 : border-image-slice property
CSS 참조 : border-image-source property
CSS 참조 : border-image-width property
HTML DOM 참조 : borderImageRepeat property