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

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

Answer 4

使用边框图片：

body {
    background: linear-gradient(90deg, #4776E6 10%, #8E54E9 90%);
}
.demo img {    
    border-image: url('http://i.imgur.com/SpwDTIy.png') 6 6 6 6;
    margin: 100px;
    border-width: 10px;
    border-image-slice: 1;
}

FIDDLE