固定中心的 CSS 边框图像

Question

我想使用如下图所示的 div 边框：

我不想中心被拉伸（对于宽和高的 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;

Answer 1

1. 剪切上图的顶部中央部分并使用background-image绘制。
2. 使用: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>