css - 我不明白为什么我创建的边框没有按照正确的比例切割 (CSS)

Question

我在 GIMP 中创建了一个边框。 Angular 切片为 50px x 20px。然而，我得到的结果非常小。

这是我的边界

这是我要添加到 500px x 100px div 的代码:

border-left: 20px solid black;
border-right: 20px solid black;
border-image-source: url(http://i.imgur.com/1AUVP8x.png);
border-image-slice: 20 50;
border-image-repeat: round;
border-image-outset: 0px;

liveweave

非常感谢任何帮助!

Answer 1

我不完全确定你想要什么效果，但这似乎有效。

* {
  box-sizing: border-box;
}

.lw {
  font-size: 40px;
}

div {
  width: 500px;
  height: 100px;
  text-align: center;
  margin: 20px 20px;
  background: pink;
  border-style: solid;
  border-width: 20px 50px 20px 50px;
  border-image: url(http://i.imgur.com/1AUVP8x.png) 20 50 repeat;
}

.tall {
  height:200px;

<div>
<p class="lw">Hello Weaver!</p>
</div>

<div class="tall">
<p class="lw">Hello Weaver!</p>
</div>