创建不规则边框

Question

我试图在div周围创建一个不规则的边框，div将包含文本。我目前正在使用两个不同的图像，并在div的顶部和底部制作背景。这种方法效果很好，但问题是div可以增长，即它可以根据其内容具有可变的宽度和高度。因此，在这种情况下，使用图像作为背景来实现这种效果已不再可行。

有没有办法用CSS和javascript创建不规则边框？显然，边框应该适应不同的宽度和高度。

我正在努力实现这样的目标，但是在各方面。

Answer 1

使用div本身的背景图像和边框的CSS border-image。这是一个例子：http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-image

您还可以使用2-3个div来实现您的目标。创建一个具有所需顶部装饰的图像，并将其设置为背景图像。然后使用您的侧面设计获得另一个可重复的图像，但不要太小以至于图案变得明显，并将其用作启用了repeat-y的图像。像这样的东西

.image-top {
  background: img(url) no-repeat;
  min-height: 25px;
}
.image-middle {
  background: img(url2) repeat-y;
}

<div class="image-top">
</div>
<div class="image-middle">
  content goes here
</div>

或

.image-top {
  background: img(url) no-repeat;
  min-height: 25px;
}
.image-middle {
  background: img(url2) repeat-y;
}
.image-bottom {
  background: img(url3) no-repeat;
  min-height: 25px;
}

<div class="image-top">
</div>
<div class="image-middle">
  content goes here
</div>
<div class="image-bottom">
</div>

Answer 2

我尝试background-size:contain使用该图片，然后添加一些padding，同时保留文字。它会缩放，但如果盒子太大，它可能看起来像素化。否则，您需要使边缘可重复，这可能是您提供的图像可能几乎不可能。

PS。让我想起了我们都想要圆角的日子，现在我们平面设计几乎没有使用border-radius属性。