Как заставить CSS border-image работать

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, 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

Как и в упомянутой статье, вам все равно придется использовать префикс -moz для firefox.

-webkit для браузеров Webkit, таких как Safari и Chrome -o для Opera и иногда… -ms для Microsoft, хотя в этом случае изображение границы просто не поддерживается в IE9 и ниже.

Answer 2

Также подумайте об использовании -webkit для работы Safari и Google Chrome.

Answer 3

почему бы вам не использовать вместо этого 3 деления? использование границы для фона - это немного странный метод.

Я бы использовал

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

, а затем определить фон для них ...