CSS3 테두리 이미지
CSS3의와 border-image 속성, 당신은 요소의 테두리로 사용할 이미지를 설정할 수 있습니다.
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
숫자는 다음 -webkit-, -moz- , 또는 -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- |
CSS3 border-image 속성
CSS3 border-image 속성은 이미지가 아닌 요소 주위의 정상적인 경계의 수를 지정할 수 있습니다.
이 건물은 세 부분으로 구성되어 있습니다 :
- 이미지 경계로서 사용
- 어디 이미지를 슬라이스하는 방법
- 중간 부분이 반복되거나 신장할지 여부를 정의
우리는 ( "/css/border.png"라고합니다) 다음과 같은 이미지를 사용합니다 :
border-image 속성은 이미지를 취해 틱택 토 보드처럼, 아홉 부분으로 조각. 그런 다음 모서리에서 모서리를 배치하고, 중간 부분을 반복하거나 지정으로 뻗어있다.
참고 : 들어 border-image 작동하려면 요소가 또한 필요 border 속성 집합을!
여기서, 화상의 중앙 부분은 테두리를 만드는 반복된다 :
테두리와 같은 이미지!
여기에 코드입니다 :
예
#borderimg
{
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;
}
»그것을 자신을 시도 여기서, 화상의 중앙 부분은 테두리를 작성할 연신된다 :
테두리와 같은 이미지!
여기에 코드입니다 :
예
#borderimg
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 stretch; /* Opera 11-12.1 */
border-image: url(border.png)
30 stretch;
}
»그것을 자신을 시도  | 팁 : border-image 속성은 실제로위한 약식 속성이다 border-image-source , border-image-slice , border-image-width , border-image-outset 및 border-image-repeat 속성. |
|---|
CSS3 테두리 이미지 - 다른 조각 값
다른 조각 값은 완전히 경계의 모양을 변경합니다
실시 예 1 :
border-image: url(border.png) 50 라운드;
실시 예 2 :
border-image: url(border.png) 라운드 20 %;
예 3 :
border-image: url(border.png) 라운드 30 %;
여기에 코드입니다 :
예
#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 국경 등록
| 재산 | 기술 |
|---|---|
| border-image | 모든 설정하는 약식 속성 border-image-* 속성을 |
| border-image-source | 이미지의 경로는 테두리로 사용되는 지정 |
| border-image-slice | 어떻게 국경 이미지를 슬라이스를 지정합니다 |
| border-image-width | 테두리 화상의 폭을 지정 |
| border-image-outset | 테두리 화상 영역의 경계 상자 넘어 연장되는 정도를 지정 |
| border-image-repeat | 테두리 이미지가 반복 반올림 또는 신장할지 여부를 지정합니다 |