我不想中心被拉伸(对于宽和高div)。我应该如何切割中心保持固定的照片?
border-style: solid;
border-width: 41px 23px 46px 21px;
-moz-border-image: url(6.png) 41 23 46 21 stretch repeat;
-webkit-border-image: url(6.png) 41 23 46 21 stretch repeat;
-o-border-image: url(6.png) 41 23 46 21 stretch repeat;
border-image: url(6.png) 41 23 46 21 fill stretch repeat;
答案 0 :(得分:2)
background-image
进行绘制。:before
和:after
伪元素绘制左/右部分。输出图片:
* {box-sizing: border-box;}
body {
background: linear-gradient(purple, white) no-repeat;
min-height: 100vh;
margin: 0;
}
.box {
background-image: url("https://s30.postimg.org/r1e86dtr5/border_image.png"), url("https://s30.postimg.org/r1e86dtr5/border_image.png");
background-size: 288px 39px;
background-repeat: no-repeat;
background-position: center top, center bottom;
padding: 40px 20px;
position: relative;
min-width: 300px;
height: 250px;
width: 500px;
margin: 20px;
}
.box:before,
.box:after {
border-radius: 10px 0 0 10px;
border: solid black;
border-width: 2px 0 2px 2px;
width: calc(50% - 142px);
position: absolute;
content: '';
bottom: 17px;
top: 19px;
left: 0;
}
.box:after {
border-radius: 0 10px 10px 0;
border-width: 2px 2px 2px 0;
left: auto;
right: 0;
}

<div class="box">
</div>
&#13;