CSS3 국경 이미지 속성
예
이미지 div 요소의 주변에 테두리를 지정 :
사업부
{
-webkit 국경 이미지 : 홈페이지 (border.png) 30 30 라운드; / * 사파리 5 * /
-o 국경 이미지 : 홈페이지 (border.png) 30 30 라운드; / * 오페라 * /
국경 이미지 : 홈페이지 (border.png) 30 30 라운드;
}
{
-webkit 국경 이미지 : 홈페이지 (border.png) 30 30 라운드; / * 사파리 5 * /
-o 국경 이미지 : 홈페이지 (border.png) 30 30 라운드; / * 오페라 * /
국경 이미지 : 홈페이지 (border.png) 30 30 라운드;
}
»시도
더 많은 예제는이 페이지의 하단에.
브라우저 지원
표의 수치 속성의 버전 번호를 먼저 지원 브라우저를 나타낸다.
즉시 디지털 -webkit- 이어 -ms- 또는 접두어 지원 전 -moz- 우선 브라우저 버전 번호 때문이다.
재산 | |||||
---|---|---|---|---|---|
테두리 이미지 | 16.0 4.0 -webkit- | 11.0 | 15.0 3.5 -moz- | 6.0 3.1 -webkit- | 15.0 11.0 -O- |
정의 및 지침을 속성
테두리 이미지 속성을 설정하는 데 사용되는 약식 속성이다 국경 이미지 소스 , 국경 이미지 조각 , 테두리 이미지 너비 , 테두리 이미지 - 초기 및 경계 이미지 반복 값입니다.
기본값으로 설정을 생략.
팁 : 국경 화상 - * 속성을 사용하여 아름다운 확장 버튼을 구축!
기본값 : | 없음 100 % 1 0 스트레칭 |
---|---|
상속 : | 아니 |
버전 : | CSS3 |
자바 스크립트 구문 : | 개체 .style.borderImage = "URL (border.png)30 30 라운드" |
문법
border-image:source slice width outset repeat;
值 | 描述 |
---|---|
border-image-source | 用于指定要用于绘制边框的图像的位置 |
border-image-slice | 图像边界向内偏移 |
border-image-width | 图像边界的宽度 |
border-image-outset | 用于指定在边框外部绘制 border-image-area 的量 |
border-image-repeat | 这个例子演示了如何创建一个border-image 属性的按钮。 |
더 많은 예제
이미지 버튼
이 예는 테두리 이미지 속성 버튼을 만드는 방법을 보여줍니다.
관련 기사
CSS3 튜토리얼 : CSS3 테두리