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

回答

相關問題