Question

我想显示图像而不是边框，它在chrome和firefox中运行良好但在IE 9中无法正常工作。有人知道如何为div显示边框图像的样式，我的div标签的css代码是：

.arrow_down {
    background-color: transparent !important;
    padding: 0px;
    border-style: solid !important;
    left: 10px !important;
    border-right: 0px;
    border-top: 0px;
    border-bottom: 20px;
    border-left: 0px;
    -webkit-border-image: url('../images/down arrow.png') 30 30 stretch; /*Safari 5*/
    -moz-border-image: url('../images/down arrow.png') 64 64 64 64 stretch stretch;
    /*-webkit-border-image: url('../images/down arrow.png') 64 64 64 64 stretch stretch;*/
    -o-border-image: url('../images/down arrow.png') 12 0 12 30 stretch; /* Opera */
   border-image: url('/images/down arrow.png') 30 30 stretch;

}

谢谢，沙

Answer 1

border-image: <border-image-source> || <border-image-slice> [ / <border-image-width> | / <border-image-width> ? / <border-image-outset> ]? || <border-image-repeat>

<强> CSS

#box { 
   border: solid 15px;
   border-image: url("border.png") 27 27 round stretch;
}

border-image property

更新1： <强>样本
jsfiddle link

所有浏览器的

border-image属性

.cool-border {
width:200px;
height:60px;
padding:10px;
border: 1em double #edb742;
-webkit-border-image: url(border-image-1.png) 30 30 round; /* Safari and Chrome */
-moz-border-image: url(border-image-1.png) 30 30 round; /* Firefox */
-ms-border-image: url(border-image-1.png) 30 30 round; /* Internet Explorer */
-o-border-image: url(border-image-1.png) 30 30 round; /* Opera */
border-image: url(border-image-1.png) 30 30 round; /* CSS3 */
}

Answer 2

IE不支持border-image属性，请检查：http://caniuse.com/border-image以获得浏览器支持。

但是，css3pie可以让你在IE 6-9中使用边框图像：http://css3pie.com/documentation/supported-css3-features/

边界图像样式的div标签

2 个答案: