2

我有这个 CSS：

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

我希望能够水平重复它，所以我得到一条虚线，但有很长的虚线

4

3 回答 3

5

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

使用的图像： 在此处输入图像描述

如果您想进行实验，有一个 CSS 属性可以让您使用元素（在本例中为您的 div）作为background-image. 该属性是background:element().

您可以在 Firefox中查看演示。

但是，此属性仅在带有前缀的 Mozilla 中有效，-moz-但也有尝试在 webkit 浏览器中实现。因此，希望将来可以通过更广泛的浏览器支持来实现。

于 2013-06-27T12:30:28.320 回答
5

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

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。

如果您希望使破折号之间的空间更短，则需要更多的工作，您需要相对定位第二个虚线边框并偏移它，无论您想减少多少空间。这样偏移量就会与开放空间重叠。到那时，您可能最好还是使用图像 >.>

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

更多关于主题，使用 javascript（jquery 或其他）复制 dom 元素并不是一项艰巨的任务。

于 2013-06-27T12:35:01.113 回答
0

尝试使用各种属性的hr标签，但请注意这些已被弃用。例如：

<hr>
<hr width="50%">
<hr align="left" width="50%">
于 2013-06-27T12:21:30.260 回答