如何使CSS边框图像工作
我的网站上有边框。我想在垂直菜单的顶部放置一个图像，在底部放置一个图像，在中间放置一个背景，但这不起作用。
这是我的代码：
.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;
}
我只有中间图像，但没有顶部/底部。火狐给我：
属性“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 ;
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 ;
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
正如您提到的文章中一样，您仍然必须使用 Firefox 的
-moz前缀。-webkit适用于 Safari 和 Chrome 等 Webkit 浏览器-o用于 Opera有时……
-ms对于 Microsoft，尽管在这种情况下，IE9 及更低版本不支持 border-image。As in the article you mentioned, you still have to use the
-mozprefix for firefox.-webkitfor Webkit browsers like Safari and Chrome-ofor Operaand sometimes…
-msfor Microsoft, although in this case border-image is just not supported in IE9 and below.还可以考虑使用
-webkit让 Safari 和 Google Chrome 正常工作。Also think of using
-webkitto get Safari and Google Chrome working.为什么不使用 3 个 div 来代替呢？使用边框作为背景是一种有点奇怪的方法。
我会使用
然后为它们定义背景......
why don't you use 3 divs instead? using border for background is kinda weirdo method.
I would use
and then define backgrounds for them...