CSS图像边框透明度/颜色问题

Question

我想制作一个很酷的div，所以我制作了这张图片以获得它的边界：

问题是边框的一半是透明区域，所以当我尝试用背景颜色填充div的空心时，它也会绘制外部透明区域。我希望背景颜色不要越过边界。

这就是我所说的：

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

#testDiv{
	border-image-source:url(https://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;
    
	min-height:600px;
	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/