Question

我对图像边框有一个非常奇怪的问题。我正在使用MacBook Pro 10.6.8，我可以安装最新的浏览器。我有一个使用图像边框的导航列表，所以：

    #navlist li 
    {   border:solid; 
        border-width: 1px 0 1px 19px; 
        -webkit-border-image:url("imgs/borderimage-nonleft-mid.png") 1 0 1 19  fill repeat stretch;
        border-image:url("imgs/borderimage-nonleft-mid.png") 1 0 1 19 fill repeat stretch;
        background: #ce0c6a;
        padding:0.5em 2em;
        display:inline-block;
    }

这在Safari（5.1），Firefox（33）和Chrome（38）中运行良好。然后我有一个所选项目的样式，几乎相同但有不同的URL：

    #navlist li.selected    
    {   -webkit-border-image:url("imgs/borderimage-select-mid.png") 1 19 fill repeat stretch;
        border-image:url("imgs/borderimage-select-mid.png") 1 19 fill repeat stretch;
        border-image-outset: 0 0 1px 0;
        border:solid; 
        border-width:1px 19px;
        border-image-width:1px 19px;
        background: #0fe8b5;
        font-weight: bold;
    }

这在Safari中运行良好。 Firefox和Chrome都坚持计算的网址为“无”。我已经仔细研究了W3C规范，搜索了堆栈交换，用Google搜索了我的手指。我根本找不到这个原因。非常感谢任何帮助，谢谢！

CCT

Answer 1

对于你的解释，调试器从上到下滚动你的css，顶部的东西首先渲染，然后底部的东西。在您的第一堂课中，您的border: solid;位于顶部（这只会创建一个普通边框），但是它下面有一个border-image，它会覆盖border属性。这就是为什么您的图像显示完美。

在你的第二堂课中，情况恰恰相反。您使用border-image覆盖border:solid;，因为它位于border-image以下。

您也可以省略＆＃34; border-width＆＃34;。

#navlist li.selected    
    {   -webkit-border-image:url("imgs/borderimage-select-mid.png") 1 19 fill repeat stretch;
        border-image:url("imgs/borderimage-select-mid.png") 1 19 fill repeat stretch;
        border-image-outset: 0 0 1px 0;
        border-image-width:1px 19px;
        background: #0fe8b5;
        font-weight: bold;
    }

这样可以正常使用。

border-image url无效

1 个答案: