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

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;)或第一个(for background-position: left;)元素,请尝试选择:last-child和:first-child选择器.

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

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;