邊框圖像不起作用

Question

Firefox沒有顯示CSS border-image 。 其他瀏覽器（Chrome瀏覽器，Safari，Opera）都顯示此問題。

我有以下代碼：

<div id="headerwrapper">
    header here
</div><!-- headerwrapper -->

<div id="mainwrapper">
    maincontent here
</div><!-- mainwrapper -->

和這個CSS：

#headerwrapper {
    border-bottom-width: 15px;
    border-image: url(images/zickzack-white.png) 15 0 repeat;
    border-image-outset: 7px;
}
#mainwrapper {
    background-color: rgba(255, 255, 255, 0.4);
    background-size: 100px 200px;
    padding: 20px 0 200px;
}

此圖顯示了Chrome（上部）和Firefox（下部）的結果

有人可以幫忙嗎？

Answer 1

試試這個代碼

border-style: solid;
border-width: 26px 26px 27px 27px;
-moz-border-image: url(http://www.w3.org/TR/css3-background/border.png) 26 26 27 27 repeat;
-webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 26 26 27 27 repeat;
-o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 26 26 27 27 repeat;
border-image: url(http://www.w3.org/TR/css3-background/border.png) 26 26 27 27 fill repeat;

Answer 2

Mozilla Firefox 15+支持“邊框圖像”。

Mozilla Firefox 3.5+支持“ -moz-border-image”。

您可以使用以下生成器： http : //border-image.com這可能有助於編寫“ border-image”的CSS代碼。

您可以嘗試以下代碼：

#headerwrapper {    
    border-style: solid; border-width: 27px; -moz-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat; 
    -webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat; 
    -o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat; 
    border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 fill repeat;
}