border-image url not working

我遇到了一个非常奇怪的图像边框问题。我正在研究MacBook Pro，10.6.8，以及我可以安装的最新浏览器。我有一个使用图像边界的导航列表，因此：border-image url not working

#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都坚持计算出的url是'none'。我搜索了W3C规范，搜索了堆栈交换，并且用我的手指搜索了一下。我根本找不到原因。任何帮助将不胜感激，谢谢！

CCT

来源

2014-11-03 cct

你可能想玩这样的工具http://border-image.com，并尝试在Chrome/FF中实现你的预期效果 – 2014-11-03 15:27:11

尝试使用这个没有“border：solid” – 2014-11-03 15:48:17

@FrederikWitte谢谢你，做到了！我很想理解为什么，但是当我在追捕中提出的所有答案发誓必须设置边框样式时？＃困惑！你能评论一个答案，所以我可以设置它？ – cct 2014-11-03 15:56:41

为你解释，在你的CSS从上到下调试器卷，事情在上面的第一渲染，然后东西在底部。在你的第一堂课，你有border: solid;顶部（这只会创建一个正常的边界），但你有一个border-image下面，它将覆盖border属性。这就是为什么，你的图像显示完美。

在你的第二堂课，是相反的。您使用border:solid;覆盖您的border-image，因为它低于border-image。

您也可以省略“边框宽度”。

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

这将工作得很好。

来源

2014-11-03 16:04:32

非常感谢！ – cct 2014-11-03 19:14:29

border-image url not working

回答

相关问题