如何用CSS制作这种均匀撕裂的纸边框？

Question

正如你在图片中看到的那样，它不仅仅是一个虚线边框..但它就像是一个双虚线边框，其中每个破折号都被另一个破折号。

如何使用CSS制作？

Answer 1

如果你想在整个元素周围使用边框，请使用边框+轮廓，小提琴：http://jsfiddle.net/fEwEp/

<div>Border around box</div>

div {
    border: 1px #333 dashed;
    outline: 1px #333 solid;
}

如果您只想在一侧（例如顶部）设置边框，请嵌套两个div，并为它们添加边框。
小提琴：http://jsfiddle.net/fEwEp/1/

<div class="border-top">
    <div>Border at top</div>
</div>

.border-top {
    border-top: 1px #333 solid;
}
.border-top > div {
    border-top: 1px #333 dashed;
}

Answer 2

您可以使用嵌套div来模拟这一点。

<强> HTML：

<div class="border1">
    <div class="border2">
        <!-- Your content here -->
    </div>
</div>

<强> CSS：

.border1 {
    border: 1px gray dotted;
}
.border2 {
    border: 1px gray dotted;
    width: 100%;
    height: 100%;
}

另外，here's a fiddle可以看到这一点。

Answer 3

我不太确定它是如何起作用的，但你可以使用border-image。