在大图像周围应用边框图像

Question

如何在大图像周围应用border-image？

HTML

 <div class="banner-wrapper ">
    <div class="demo">
        <img src="http://www.stickylife.com/images/u/667a4600f02d485187d4c6d757d28bdb-800.png" alt="" >
    </div>
</div>

​

CSS

.demo img{      border-image: url("http://i.imgur.com/SpwDTIy.png") 6 6 6 6;
border-image-width: 5px;
border-style: solid;
}

我正在尝试这个，但不起作用。

小提琴here。

编辑：

如果你勾选这个

，我的border-image的下部没有显示出来。对于padding:15px，它也不起作用。

Answer 1

我已经添加了一些来自谷歌的图片，它对我很有效。

.demo img{      
    border: 10px solid transparent;
    border-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRoorWzCXfyuLKQ8cUOMPZE9Jh9sxqxv9U1bt8y0AlaQet-7dei") 6 6 6 6;
}

jsfiddle here。

Answer 2

.demo img{     
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url("http://www.clipartbest.com/cliparts/LTK/pdM/LTKpdMnAc.png") 30 round; /* Safari 3.1-5 */
-o-border-image: url("http://www.clipartbest.com/cliparts/LTK/pdM/LTKpdMnAc.png") 30 round; /* Opera 11-12.1 */
border-image: url("http://www.clipartbest.com/cliparts/LTK/pdM/LTKpdMnAc.png") 30 round;

}

JSfiddle updated for you

还要记住，IE10 downawards无论如何都不支持这一规则。CanIuse

Answer 3

正确的语法如下所示

#borderimg { 
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30 round; /* Safari */
    -o-border-image: url(border.png) 30 round; /* Chrome */
    border-image: url(border.png) 30 round;
}

参考：http://www.w3schools.com/css/css3_border_images.asp