你能指定一個圖像到邊界嗎？

Question

我在html和css中做了一個導航菜單，但是我想讓每個導航項的邊框右邊是圖像。

我試圖

border-right:url(image.jpg); 

但這並沒有工作。

我該怎麼做？

Answer 1

您可以使用背景圖像，然後將背景圖像放在每個元素的右側。通常這會發生在a標籤或li。例如：

#primaryNav a:link { 
background-image: url('image.jpg'); 
background-position: right; 
background-repeat: no-repeat; 
display: block; /* make the link background clickable */ 
} 

如果不希望邊框應用到最後一個（使用background-position: right;時）或第（用於background-position: left;）元素在你的菜單，然後嘗試:last-child和:first-child選擇。

#primaryNav a:last-child { 
    background: none; 
} 

Answer 2

有一個名爲border-image的CSS屬性，這可能是你在追求什麼。我不知道目前的瀏覽器支持什麼，但...

Answer 3

這實際上並不建議這樣做。有關詳細信息，請參閱以下主題：How do I set a border-image?

Answer 4

這實際上是CSS 3的一項新功能，該屬性名爲border-image。不幸的是，今天的瀏覽器對它來說是not yet widely supported，因爲它仍然是候選推薦。

Answer 5

#primaryNav a:link { background: url('image.jpg') no-repeat right;
display: block; }

通常好的做法是在一行上編寫你的background屬性的。

Answer 6

您可以設置自定義邊框尺寸。頂部，左側和底部將爲0px並設置邊框圖像。如果你想用其他風格裝飾這些邊界，那麼使用子div。

右圖decoreted格的風格是：

border-style: solid; 
border-width: 0px 15px 0px 0px; 
-moz-border-image: url(border.png) 27 repeat; 
-webkit-border-image: url(border.png) 27 repeat; 
-o-border-image: url(border.png) 27 repeat; 
border-image: url(border.png) 27 fill repeat;