CSS - 创建自定义虚线div

Question

我想用圆圈创建一条线。这可以用background-repeat完成吗？或者我需要将图片设置为背景？圆圈的半径应为5px。

p:after {
   content: '';
   background: 'rounded div of size 10x10px' repeat-x
   width: 50%;
}

Answer 1

这是唯一不使用base64编码的background-image或border-image或使用外部文件的解决方案。

https://jsfiddle.net/3r6xsr0m/

HTML：

<div class="line"></div>

的CSS：

.line:before {
    content: "..................................................................................................";
    display: block;
    font-size: 60px;
    font-family: Georgia;
    color: #aaa;
    max-width: 100%;
    overflow: hidden;
}

根据浏览器字体渲染算法，点可能会有所不同。

Answer 2

您必须创建一个10px x 10px的点图像，然后使用您使用伪元素或新元素重复背景的方法。如果您能够防止IE8等浏览器出现任何问题，我会使用新的div元素。如果你去伪，你还必须给你的元素一个宽度。