使用圖像作爲邊框

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

我得到它的工作：

.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或以下，這是圖像的一半它只會拉長。當然，我不確定。更改一個更大的圖像的邊框寬度

Answer 2

而是在你的CSS使用 '重複' 的，改變你的邊界圖像 - 切片值在你的CSS代碼。不確定你想要的結果是什麼，但是如果你改變你的代碼，並使用這些值，你應該能夠實現你的目標。您當前的代碼只能將邊框圖像放在每個角落。

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