2

嗨，试图找出我的代码有什么问题。

一切正常，除了 Firefox 的边框图像。

这是我的代码：

.header_holder{
        border-bottom-width:2px;
        -webkit-border-image:url("../img/assets/border-image.png") 0px 0px 2px 0px stretch;
        -moz-border-image:url("../img/assets/border-image.png") 0px 0px 2px 0px stretch;
        -ms-border-image:url("../img/assets/border-image.png") 0px 0px 2px 0px stretch;
        -o-border-image:url("../img/assets/border-image.png") 0px 0px 2px 0px stretch;
        border-image:url("../img/assets/border-image.png") 0px 0px 2px 0px stretch;
        position:fixed;
        z-index:999;
    }

向那些可以提供帮助的人致敬...

谢谢！

4

1 回答 1

2

坦率地说，它不适用于任何浏览器，因此问题不一定特定于 Firefox。

语法不正确，您不应该指定度量，在您的情况下，px. 只需省略测量，它应该可以按预期工作。

MDN 参考- 正式语法：

<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

这是他们给出的例子：

.example { 
    border-image: url("/files/4127/border.png") 30 30 repeat;
}

更新的 CSS：

.header_holder {
    border-style: solid;
    border-bottom-width: 2px;
    border-image: url("../img/assets/border-image.png") 0 0 2 2 stretch;
    -webkit-border-image: url("../img/assets/border-image.png") 0 0 2 2 stretch;
    -moz-border-image: url("../img/assets/border-image.png") 0 0 2 0 stretch;
    -ms-border-image: url("../img/assets/border-image.png") 0 0 2 0 stretch;
    -o-border-image: url("../img/assets/border-image.png") 0 0 2 0 stretch;
    position: fixed;
    z-index: 999;
}

它现在可以在 FF 和其他支持的浏览器中使用。（此处为示例）

您可能对这个有用的资源感兴趣 - http://border-image.com/

于 2013-10-06T03:23:44.567 回答