你能指定一个图像到边界吗？

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;