CSS 图片边框 transparency/color 问题

Question

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

问题是一半的边界是反parent区域，所以当我尝试用background-color填充div的空白中心时，它也会绘制外部， transparent 区域。我希望背景颜色不要超过边界。

我要说的是：

@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，但我不知道如何调整它，所以它总是比它的 parent 小一点。另外，我想让它尽可能简单。有什么想法吗？

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/

CSS 图片边框 transparency/color 问题

CSS image border transparency/color issue

css

image

border