如何使CSS边框图像工作

Question

我的网站被边框困扰了。我想在垂直菜单的顶部放一张图片，底部放一张，中间放一个背景，但是不行。

这是我的代码:

.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;
}

我只有中间的图像，但没有顶部/底部。Firefox给了我:

属性«border-bottom-image»unknown。属性«border-top-image»unknown .

知道我做错了什么吗?

编辑:这适用于FF, chrome和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 ;

Answer 1

正如您在文章中提到的，您仍然必须为firefox使用-moz前缀。

-webkit用于Webkit浏览器，如Safari和Chrome-o for Opera有时……-ms for Microsoft，尽管在这种情况下，border-image在IE9及以下版本中不支持

Answer 2

还可以考虑使用-webkit来获得Safari和Google Chrome的工作

Answer 3

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

我会用

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