边框图像不起作用答案

【问题标题】：border-image is not working边框图像不起作用
【发布时间】：2015-09-01 19:03:11
【问题描述】：

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;
}

This picture shows result in Chrome (upper part) and Firefox (lower part)

有人可以帮忙吗？

【问题讨论】：

可能与stackoverflow.com/questions/12295565/…有关，可以试试添加border-style:solid;吗？
我遇到了完全相同的问题：stackoverflow.com/questions/31838289/… 确实是边框样式问题

标签： html css firefox

【解决方案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;

【讨论】：

这里的重要部分是规范要求的border-style: solid。

【解决方案2】：

Mozilla Firefox 15+ 支持“border-image”。

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;
}

【讨论】：