css - 作成した境界線が正しい縦横比 (CSS) にスライスされない理由がわかりません

Question

GIMPでボーダーを作成しました。コーナー スライスは 50px x 20px です。ただし、得られる結果は非常に押しつぶされて小さくなります。

これが私の国境です

500px x 100pxdivに追加しようとしているコードは次のとおりです。

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;

ライブウィーブ

どんな助けでも大歓迎です！

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>