Question

你好想弄清楚我代码中的错误。

一切正常，除了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;
    }

关心那些可以提供帮助的人......

谢谢！

Answer 1

坦率地说，它无法在任何浏览器中运行，因此问题不一定特定于Firefox。

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

MDN Reference - 正式语法：

<'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和其他支持的浏览器中使用。 (example here)

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

Border-image属性在Mozilla Firefox中不起作用

1 个答案: