How to make CSS border-image work

问题

I am stuck with borders on my website. I want to put an image at the top of my vertical menu, one at the bottom and a background for the middle but that doesn't work.

This is my code:

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

I only have the middle image but not the top/bottom. Firefox gives me:

Property « border-bottom-image » unknow. Property « border-top-image » unknow.

Any idea what I'm doing wrong?

Edit: This works with FF, Chorme and Opera but not 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 ;

回答1:

As in the article you mentioned, you still have to use the -moz prefix for firefox.

-webkit for Webkit browsers like Safari and Chrome -o for Opera and sometimes… -ms for Microsoft, although in this case border-image is just not supported in IE9 and below.

回答2:

Also think of using -webkit to get Safari and Google Chrome working.

回答3:

why don't you use 3 divs instead? using border for background is kinda weirdo method.

I would use

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

and then define backgrounds for them...

来源：https://stackoverflow.com/questions/7860114/how-to-make-css-border-image-work

标签

css

css3

cross-browser

border-image