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»未知。物业«border-top-image»unknow。

知道我做错了吗？

编辑：这适用于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 ;

Answer 1

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

-webkit适用于Safari和Chrome等Webkit浏览器 Opera的-o 而有时… -ms适用于Microsoft，但在这种情况下，IE9及以下版本不支持border-image。

Answer 2

还要考虑使用-webkit让Safari和Google Chrome正常运行。

Answer 3

为什么不使用3个div呢？使用边框作为背景是有点古怪的方法。

我会用

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

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

如何使CSS边框图像工作

3 个答案: