如何使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 »未知。属性« border-top-image »未知。

你有什么想法？我做错了什么吗？

编辑：这可以在 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 ;

- remyremy

Answer 1

正如你提到的那篇文章中所说，对于Firefox浏览器，仍需使用-moz前缀。

-webkit 用于Webkit浏览器，如Safari和Chrome。 -o 用于Opera， 有时候可能还需要使用 -ms 来针对微软浏览器，不过在IE9及以下版本中不支持border-image属性。

- kojiro

---

谢谢你们两个！经过一些更改，我设法得到了以下代码：border-color:transparent; border-width:45px 10px 48px 10px; -moz-border-image:url("../pictures/left_menu_full.png") 45 10 48 10 repeat ; -webkit-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 ;它在Firefox和Chrome上运行良好，但在IE 9和Opera上不起作用。有什么解决方法吗？ - remyremy

@remyremy 看到修改了。不幸的是，border-image在IE中不被支持，所以在这种情况下你需要找到一个替代方案。 - kojiro

Answer 2

同时考虑使用-webkit来使Safari和Google Chrome正常工作。

- Max Allan

Answer 3

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

我会使用

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

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

- sonia

---

为了在元素的顶部和底部添加图像，边框背景是完全适当的。称呼一个解决方案为“怪人”是不恰当的。 - kojiro

好的，使用div更少出现问题...通常设计师会使用div来完成这样的任务，换句话说-我没有看到过使用边框方法添加背景。如果我试图帮忙，为什么回答这么简短？ - sonia

抱歉说话直接了点。这并不是针对个人，但你的回答并没有回答到原帖的问题。它提出了一种替代方法，但避免他所述的方法的唯一原因是它很“怪异”。如果能写出合理的理由来避免使用边框图像方法，那么这个回答会更好。 - kojiro

由于边框图像是CSS3规范的一部分，因此它并不被归类为奇怪的方法。 - Rob