border-image를 지원하지 않는 브라우저의 폴백 배경

Question

간단한 버튼 디자인을 위해 CSS3 border-image을 사용하려고합니다. 이미지의 왼쪽 슬라이스는 텍스트의 왼쪽 테두리이고, 오른쪽 슬라이스는 오른쪽 테두리이며, 중간 조각은 배경으로 반복되어야합니다 (또는 뻗어 - 그것은 중요하지 않습니다). border-image을 지원하지 않는 브라우저의 경우 대비책이 필요합니다. 중간 슬라이스를 배경으로 사용하면 가장자리가 없어도 괜찮습니다.

.button { 
    border: solid 1px white; 
    border-size: 0 5px; 
    background: ('button-slice.png') repeat; 
    border-image: url('button.png') 0 5 0 5 fill; 
    -moz-border-image: url('button.png') 0 5 0 5; 
    /* repeat for other vendor prefixes */ 
} 

background 호텔에서 이미지가 border-image를 지원하는 브라우저의 테두리와 엉망 버튼을 중복됩니다 :이 할 경우 문제가된다.

모질라 또는 유사한 자바 스크립트 검사를 도입하지 않고도이 문제를 해결할 수있는 간단한 방법이 있습니까?

Answer 1

변경 경계 이미지 0 5 0 51 1 5 1로는 :

는

border-image: url('button.png') 1 1 5 1 fill; 
-moz-border-image: url('button.png') 1 1 5 1; 

border-image generator online

Answer 2

border-image에서는 대체 까다 롭다. Doing ...

.button { 
    border: solid 1px white; 
    border-size: 0 5px; 
    background: ('button-slice.png') repeat; 
    background: rgba(0,0,0,0); 
    border-image: url('button.png') 0 5 0 5 fill; 
    -moz-border-image: url('button.png') 0 5 0 5; 
    /* repeat for other vendor prefixes */ 
} 

IE9를 제외한 모든 브라우저에서 작동해야합니다.

당신은 단지 왼쪽과 오른쪽 테두리를 가지고 있기 때문에, 나는 의사 요소를 사용하여 제안 ...

.button { 
    border: solid 1px white; 
    background: ('button-slice.png') repeat; 
    position: relative; 
} 

.button:before, .button:after { 
    content: ''; 
    width: 5px; 
    position: absolute; 
    height: 100%; 
    background: transparent url('button.png') 0 0 no-repeat; 
    top: 0; 
} 

.button:before {left: -5px;} 
.button:after {right: -5px;} 

이 기술은 모든 최신 브라우저 플러스 IE8에서 좋은 버튼을 표시해야합니다. 이전 브라우저는 가장자리없이 대체됩니다.

Answer 3

FF의 새 버전은 border-image 매개 변수를 지원하고 다른 매개 변수는 다른 FF를 지원하는 것으로 보입니다.

은 그래서 그 라인의 순서를 반대로 해보십시오 :이 방법으로

-moz-border-image: url('button.png') 0 5 0 5; 
border-image: url('button.png') 0 5 0 5 fill; 

, 두 매개 변수를 지원하고 채우기 버전을 취할 것입니다 나중에 하나를 오버라이드 (override) 브라우저를.