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和{{1选择器。

:first-child

Answer 2

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

正确的图像decoreted 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;

Answer 3

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

Answer 4

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

通常是将背景属性编码为单行的良好做法。

Answer 5

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

Answer 6

实际上并不建议这样做。有关详细信息，请参阅此主题：How do I set a border-image?

你可以将图像分配到右边界吗？

6 个答案: