CSS圖片邊框透明/顏色問題

Question

我想做一個酷格，所以我做了這個形象，以獲取其邊界：

的問題是邊界的一半是透明的區域，所以當我嘗試用背景色填充div的空白中心時，它也繪製了外部透明區域。我希望背景顏色不要越過邊界。

這裏就是我說的：

@charset "utf-8"; 
 
/* CSS Document */ 
 

 
#testDiv{ 
 
\t border-image-source:url(https://s9.postimg.org/40j461sf3/Div_Sprite.png); 
 
\t border-image-slice: 50% 25% 25%; 
 
    border-image-repeat:repeat; 
 
\t border-image-width:auto; 
 
\t border-image-repeat:round; 
 
    background-color: red; 
 
    
 
\t min-height:600px; 
 
\t width:600px; 
 
} 
 

 
#body { 
 
    height:100%; 
 
    width: 100%; 
 
    background: #CCC; 
 
    position: absolute; 
 
    margin: 50px 0 0 0; 
 
}

<div id="testDiv"> 
 

 
</div>

^{還是看http://jsfiddle.net/6M59T/119/。}

我該如何解決這個問題？我曾想過在這個版本中放一個稍微小一點的div，但我不知道如何調整它，所以它總是覆蓋比它的父母少一點。另外，我想盡可能保持簡單。有任何想法嗎？

Answer 1

也許我錯了，但您可以嘗試玩border-image-outset和margin屬性。

float:left; 
margin:50px 20px; 
border-image-source:url(http://s9.postimg.org/40j461sf3/Div_Sprite.png); 
border-image-slice: 50% 25% 25%; 
border-image-repeat:repeat; 
border-image-width:auto; 
border-image-repeat:round; 
background-color: red; 
border-image-outset:30px; 

http://jsfiddle.net/6M59T/120/