如何使CSS边框图像工作 [英] 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.
这是我的代码:
.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给了我:
I only have the middle image but not the top/bottom. Firefox gives me:
属性«border-bottom-image»unknow。属性«border-top-image»未知。
Property « border-bottom-image » unknow. Property « border-top-image » unknow.
任何想法我做错了什么?
Any idea what I'm doing wrong?
编辑:这适用于FF,Chorme和Opera但不适用于IE9。
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 ;
推荐答案
使用firefox的 -moz
前缀。
As in the article you mentioned, you still have to use the -moz
prefix for firefox.
-webkit
对于Webkit浏览器如Safari和Chrome
-o
for Opera
,有时...
-ms
为Microsoft,虽然在这种情况下边框图像只是不支持在IE9及以下。
-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.
这篇关于如何使CSS边框图像工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!