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

将上图的顶部中央部分剪切下来，然后使用background-image绘制。
使用 :before 和 :after 伪元素绘制 left/right 部分。

输出图像：

* {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>

CSS 固定中心的边框图像

CSS border-image with fixed center

html

css

border-image