不支持邊框圖像的瀏覽器的後備背景

我試圖使用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瀏覽器。

是否有解決這個問題的輕量級方法（不引入modernizr或類似的javascript檢查）？

來源

2012-08-27 Tgr

您正在使用的圖像很重要。所以給我們那 –

你的平均按鈕圖像，一個帶圓角的矩形，在白色背景上。我不明白爲什麼它應該重要。 – Tgr

@Tgr你解決了你的問題嗎？解決方案在這裏嗎？ – amotzg

改變邊界圖像0 5 0 5到1 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

來源

2012-08-27 17:11:21

甚至更多地弄亂了按鈕。 – Tgr

border-image是棘手的回退。做...

.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加上漂亮的按鈕。舊的瀏覽器後退沒有邊緣。

來源

2012-08-27 17:21:24 Duopixel

看來，新版本的FF支持border-image參數和一個覆蓋另一個。

嘗試扭轉這些行的順序，那麼：

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

通過這種方式，同時支持參數，並覆蓋一個與後來將採取與填充版本的瀏覽器。

來源

2012-09-03 13:02:32 amotzg

不支持邊框圖像的瀏覽器的後備背景

回答

相關問題