3

我被我网站上的边框困住了。我想在垂直菜单的顶部放一张图片，在底部放一张，在中间放一张背景，但这不起作用。

这是我的代码：

.border-image {
border: solid transparent 10px; //I tried with and without this line
border-top-image: url(/pictures/menu_top.png) 10 round round;
border-bottom-image: url(/pictures/menu_bottom.png) 10 round round;
}
#menu_left {
background-image: url(/pictures/menu_middle.png);
background-repeat:repeat-y;
}

我只有中间图像，但没有顶部/底部。火狐给了我：

属性«border-bottom-image»未知。属性«border-top-image»未知。

知道我做错了什么吗？

编辑：这适用于 FF、Chorme 和 Opera，但不适用于 IE9。

border-color:transparent; border-width:45px 10px 48px 10px;
-moz-border-image:url("../pictures/left_menu_full.png") 45 9 48 9 stretch ;
-webkit-border-image:url("../pictures/left_menu_full.png") 45 10 48 10 repeat;
-o-border-image:url("../pictures/left_menu_full.png") 45 10 48 10 repeat ;
-ms-border-image:url("../pictures/left_menu_full.png") 45 10 48 10 repeat ;
border-image:url("../pictures/left_menu_full.png") 45 10 48 10 repeat ;
4

3 回答 3

3

正如您提到的文章中一样，您仍然必须使用-mozfirefox 的前缀。

-webkit对于 Webkit 浏览器，例如 Safari 和 Chrome -ofor Opera，有时…… -ms对于 Microsoft，尽管在这种情况下，IE9 及以下版本不支持边框图像。

于 2011-10-22T14:10:12.687 回答
1

还-webkit可以考虑使用 Safari 和 Google Chrome 工作。

于 2011-10-22T14:13:18.510 回答
0

你为什么不使用3个div呢？使用边框作为背景是一种奇怪的方法。

我会用

<div id="background-top"></div>
<div id="menu"></div>
<div id="backgroud-bottom"></div>

然后为他们定义背景......

于 2011-10-22T14:14:07.653 回答