使用图像作为边框

Question

我正在尝试使用附加图像作为div的边框但是失败了。

我的代码是

<div class="menu-box-wrapper">
</div>

CSS

.menu-box-wrapper{
border-image:url(../images/about-text-bg-box.png) 30 repeat stretch;
height:100px;
width:100px;
}

演示：http://jsfiddle.net/squidraj/gunj1nxj/1/

Answer 1

而不是使用＆＃39;重复＆＃39;在你的CSS中，改变你的css代码中的border-image-slice值。不确定你想要的结果是什么，但是如果你改变你的代码如下所示并玩这些值，你应该能够实现你想要的。您当前的代码只将边框图像放在每个角落。

.menu-box-wrapper{
border: 5px solid transparent;
border-image:url(../images/about-text-bg-box.png) 30% stretch;
background:#ccc;
}

Answer 2

我得到了它的工作：

.menu-box-wrapper{
    border: 20px solid transparent;
    border-image: url(http://s30.postimg.org/w2z6ws0h9/about_text_bg_box.png?noCache=1431183351) 7 repeat stretch;
    padding: 15px;
    height:200px;
    width:400px;
    background:#000;
}
h1{
    color:#fff;
}

https://jsfiddle.net/Danthejsman/gunj1nxj/4/

显然，如果你做7或以下，它只会拉伸，这是图像的一半。当然，我不确定。更改较大图像的边框宽度