html - 具有固定中心的 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>