这是我在最近的一个项目中使用的一个技巧，它几乎可以实现我想要的任何水平边框。每次需要水平边框时，我都使用<hr/>。给这个hr添加边框的基本方法是

 hr {border-bottom: 1px dotted #000;}

但如果你想控制边界，例如增加点之间的间距，你可以尝试这样做:

hr {
height:14px; /* specify a height for this hr */
overflow:hidden;
}

在下面，你创建你的边界(这里是一个点的例子)

hr:after {
content:".......................................................................";
letter-spacing: 4px; /* Use letter-spacing to increase space between dots*/
}

这也意味着你可以添加文本阴影的点，梯度等。你想要什么都行……

它对水平边界非常有效。如果你需要垂直的，你可以为另一个hr指定一个类，并使用CSS3的rotation属性。

基于@Eagorajose的答案，用速记语法构建4个边的解决方案:

background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */

#{页 背景:线性渐变(向右，#000 33%，#fff 0%) top/10px 1px repeat-x， /* top */ 线性渐变(#000 33%，#fff 0%)右/1px 10px重复-y， /*右*/ 线性渐变(向右，#000 33%，#fff 0%)底部/10px 1px重复-x， /*底部*/ 线性渐变(#000 33%，#fff 0%) left/1px 10px repeat-y;/* left */ 宽度:100 px; 身高:100 px; ｝ < div id = "页面" > < / div >

所以从给出的答案开始，应用CSS3允许多个设置的事实-下面的代码对于创建一个完整的框是有用的:

#border { width: 200px; height: 100px; background: yellow; text-align: center; line-height: 100px; background: linear-gradient(to right, orange 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(blue 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(to right, green 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(red 50%, rgba(255, 255, 255, 0) 0%); background-position: top, right, bottom, left; background-repeat: repeat-x, repeat-y; background-size: 10px 1px, 1px 10px; } <div id="border"> bordered area </div>

值得注意的是，背景大小的10px给出了破折号和空白将覆盖的区域。背景标签的50%是虚线的实际宽度。因此，可以在每条边界上使用不同长度的破折号。

你可以创建一个画布(通过javascript)并在里面画一条虚线。在画布内，您可以控制多长破折号和之间的空间应该。

如果你只针对现代浏览器，并且你可以在一个独立的元素上设置边框，那么你可以使用CSS缩放变换来获得一个更大的点或破折号:

border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);

它需要大量的位置调整才能让它对齐，但它是有效的。通过改变边框的厚度，起始大小和比例因子，你可以得到你想要的厚度-长度比。你唯一不能碰的就是缺口比。

这是一个古老但仍然非常相关的话题。目前最上面的答案很好，但只适用于非常小的点。正如Bhojendra Rauniyar已经在评论中指出的，对于较大的点(>2px)，点看起来是方形的，而不是圆形的。我发现这个页面搜索的是间隔点，而不是间隔方块(甚至破折号，就像这里的一些答案使用的那样)。

在此基础上，我使用了径向梯度。同样，使用Ukuser32的答案，可以很容易地为所有四个边框重复点属性。只有角落不完美。

div { padding: 1em; background-image: radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px), radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px), radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px), radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px); background-position: top, right, bottom, left; background-size: 15px 5px, 5px 15px; background-repeat: repeat-x, repeat-y; } <div>Some content with round, spaced dots as border</div>

径向梯度期望:

形状和可选位置 两个或更多的停止:一个颜色和半径

在这里，我想要一个直径为5像素(半径为2.5px)的点，点之间的直径为2倍(10px)，加起来为15px。背景尺寸应该与这些相匹配。

这两个站点的定义是这样的点是漂亮的和光滑的:纯黑色的一半半径和比梯度到整个半径。