Html 您可以将图像分配给 border-right 吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7948447/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you assign an image to border-right?
提问by RSM
I am making a navigational menu in html and css, but i want the border right of each navigational item to be an image.
我正在用 html 和 css 制作一个导航菜单，但我希望每个导航项的右侧边框都是一个图像。
I tried
我试过
border-right:url(image.jpg);
But this didn't work.
但这没有用。
How do I do it?
我该怎么做？
回答by Dylan Valade
You can use a background image and then position the background image to the right of each element. Usually this would go on either the atag or li. For example:
您可以使用背景图像，然后将背景图像放置在每个元素的右侧。通常这会在a标签或li. 例如：
#primaryNav a:link {
background-image: url('image.jpg');
background-position: right;
background-repeat: no-repeat;
display: block; /* make the link background clickable */
}
If you don't want the border applied to the last (when using background-position: right;) or first (for background-position: left;) element in your menu then try the :last-childand :first-childselectors.
如果您不想将边框应用于菜单中的最后一个（使用时background-position: right;）或第一个（for background-position: left;）元素，请尝试使用:last-child和:first-child选择器。
#primaryNav a:last-child {
background: none;
}
回答by user586295
You can set custom border size. Top, left and bottom will be 0px and set a border-image. If you want to decorate these borders with other style then use sub div.
您可以设置自定义边框大小。顶部、左侧和底部将为 0px 并设置边框图像。如果您想用其他样式装饰这些边框，请使用 sub div。
Right image decoreted div style is:
右图 dereeted div 样式是：
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;
回答by Marco Miltenburg
This is actually a new feature of CSS 3 and the property is called border-image. Unfortunately, it's not yet widely supportedby today's browsers as it's still a candidate recommendation.
这实际上是 CSS 3 的一个新特性，该属性称为border-image。不幸的是，它尚未得到当今浏览器的广泛支持，因为它仍然是候选推荐。
回答by Christopher Marshall
#primaryNav a:link {
background: url('image.jpg') no-repeat right;
display: block;
}
#primaryNav a:link {
background: url('image.jpg') no-repeat right;
display: block;
}
Typically good practice to code your background property's on a single line.
通常将背景属性编码在一行上的良好做法。
回答by Gareth
There's a css property called border-imagewhich could be what you're after. I'm not sure what the current browser support for it is though...
有一个名为的 css 属性border-image，这可能是您所追求的。我不确定当前浏览器对它的支持是什么......
回答by lc2817
It is not actually recommended to do it this way. See this thread for details: How do I set a border-image?
实际上不建议这样做。有关详细信息，请参阅此线程：如何设置边框图像？
