我想制作一个很酷的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>
我该如何解决这个问题?我想过在这个里面加一个稍微小一点的div,但是我不知道如何调整它所以它总是比它的父级要少一点。另外,我想尽量保持简单。有什么想法吗?
答案 0 :(得分:0)
也许我错了,但您可以尝试使用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;