您可以将图像分配给border-right吗？答案

【问题标题】：Can you assign an image to border-right?您可以将图像分配给border-right吗？
【发布时间】：2011-12-18 09:44:48
【问题描述】：

我正在用 html 和 css 制作导航菜单，但我希望每个导航项的右边框都是图像。

我试过了

border-right:url(image.jpg);

但这没有用。

我该怎么做？

【问题讨论】：

标签： html css image border

【解决方案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;
}

【讨论】：

【解决方案2】：

您可以设置自定义边框大小。顶部、左侧和底部将为 0px 并设置边框图像。如果您想用其他样式装饰这些边框，请使用 sub div。

右图修饰的 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;

【讨论】：

【解决方案3】：

这实际上是 CSS 3 的一个新特性，属性名为border-image。不幸的是，在今天的浏览器中它是not yet widely supported，因为它仍然是候选推荐。

【讨论】：

【解决方案4】：

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

将背景属性编码在一行中的典型做法是。

【讨论】：

【解决方案5】：

有一个名为 border-image 的 css 属性，这可能是您所追求的。我不确定当前浏览器对它的支持是什么...

【讨论】：

【解决方案6】：

实际上不建议这样做。详情见本帖：How do I set a border-image?

【讨论】：