水平重复DIV以制作虚线

Question

我有这个CSS：

#dotted_line {
    width:80px;
    height:5px;
    margin:10px auto 0 auto;
    background:#666666;
    background-repeat: repeat-y;
}

我希望能够水平重复它，所以我得到一个虚线但是有长划线

Answer 1

您可以使用与身体背景颜色相同的background-image，并给出虚线印象。请参阅此example。

使用的图片：

---

如果您想进行实验，可以使用CSS属性，使您能够使用元素（在本例中为div）作为background-image。此属性为background:element()。

您可以在Firefox中看到demo here。

但是，此属性仅适用于具有-moz-前缀的Mozilla，但也尝试在webkit浏览器中实现。所以，希望这可以在未来更广泛的浏览器支持下实现。

Answer 2

这是您问题的替代解决方案：

的CSS：

.dashed {
    margin:auto;
    width:50%;
    border-style:dashed none none none;
    transform: scaleX(2);
}

HTML：

<div class="dashed"></div>

http://jsfiddle.net/LkVxp/或http://jsfiddle.net/LkVxp/1/

所以我们所做的就是取一个div的边框并将其放大，这样你就可以使破折号更长。只需确保将百分比与比例相匹配，否则宽度将变为100％以外的其他值（或者您可以根据需要调整它）。厚度可以通过border-width正常控制。

如果你想让短划线之间的空间更短，那么你需要做更多的工作，你需要相对地定位第二个虚线边框，然后将它偏移，无论你想要减少多少空间。因此，偏移量将与开放空间重叠。那时你可能会更好地使用图像而不是＆gt;。＆gt;

以下是一个例子：http://jsfiddle.net/LkVxp/3/

有关主题的更多信息，使用javascript（jquery或其他）复制dom元素并不困难。

Answer 3

尝试 hr 标记，该标记可以采用各种属性，但请注意不推荐使用这些标记。例如：

<hr>
<hr width="50%">
<hr align="left" width="50%">