예
요소 주위의 테두리 이미지를 지정합니다 :
#borderimg {
-webkit-border-image: url(border.png) 30
round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 round; /* Opera 11-12.1 */
border-image: url(border.png)
30 round;
}
»그것을 자신을 시도 더 "Try it Yourself" 아래의 예.
정의 및 사용
테두리 이미지 속성은 이미지가 아닌 요소 주위의 정상적인 경계의 수를 지정할 수 있습니다.
테두리 이미지 속성을 설정하는 약식 속성이다 국경 이미지 소스 , 국경 이미지 슬라이스 , 테두리 이미지 너비 , 테두리 이미지 - 초기 및 경계 이미지 반복 속성을.
생략 된 값은 기본값으로 설정됩니다.
| 기본값: | none 100% 1 0 stretch |
|---|---|
| 상속 : | no |
| 애니메이션 : | no. Read about animatable |
| 번역: | CSS3 |
| 자바 스크립트 구문 : | object .style.borderImage="url(border.png) 30 round" Try it |
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
숫자는 -moz-, -webkit- 다음에, 또는 접두어와 함께 일 첫 번째 버전을 지정 -O-.
| 재산 | |||||
|---|---|---|---|---|---|
| border-image | 16.0 4.0 -webkit- | 11.0 | 15.0 3.5 -moz- | 6.0 3.1 -webkit- | 15.0 11.0 -O- |
참고 : 아래의 각 값에 대한 개별 브라우저 지원을 참조하십시오.
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 | 국경 이미지가 반복되어야하는지, 반올림 또는 신장 | »플레이 |
| initial | 기본값으로이 속성을 설정합니다. 초기에 대해 알아보기 | |
| inherit | 부모 요소에서이 속성을 상속합니다. 대한 상속 읽기 |
더 예
예
다른 조각 값은 완전히 경계의 모양을 변경합니다
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
50 round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
50 round; /* Opera 11-12.1 */
border-image: url(border.png)
50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30% round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30% round; /* Opera 11-12.1 */
border-image: url(border.png)
30% round;
} »그것을 자신을 시도 관련 페이지
CSS3 튜토리얼 : CSS3 테두리 이미지
CSS 참조 : border-image-outset property
CSS 참조 : border-image-repeat property
CSS 참조 : border-image-slice property
CSS 참조 : border-image-source property
CSS 참조 : border-image-width property
HTML DOM 참조 : borderImage property