这是一个古老但仍然非常相关的话题。目前最上面的答案很好，但只适用于非常小的点。正如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。背景尺寸应该与这些相匹配。

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

这是一个非常老的问题，但它在谷歌中有很高的排名，所以我将抛出我的方法，它可以根据你的需要工作。

在我的例子中，我想要一个粗虚线边界，在虚线之间有一个最小的中断。我用一个CSS图案生成器(比如:http://www.patternify.com/)创建了一个10px宽1px高的图案。其中9px为纯色，1px为白色。

在我的CSS中，我将该图案作为背景图像，然后使用background-size属性将其放大。我最终得到了一个20px * 2px的重复破折号，18px的实线和2px的白色。你可以把虚线放大一点。

好的方面是，由于图像被编码为数据，因此不需要额外的外部HTTP请求，因此没有性能负担。我将图像存储为SASS变量，以便在我的站点中重用它。

这使用了标准的CSS边框和一个伪元素+overflow:hidden。 在这个例子中，你得到了三个不同的2px虚线边界:normal，间隔为5px，间隔为10px。实际上是10px，只有10-8=2px可见。

div.two{border:2px dashed #FF0000} div.five:before { content: ""; position: absolute; border: 5px dashed #FF0000; top: -3px; bottom: -3px; left: -3px; right: -3px; } div.ten:before { content: ""; position: absolute; border: 10px dashed #FF0000; top: -8px; bottom: -8px; left: -8px; right: -8px; } div.odd:before {left:0;right:0;border-radius:60px} div { overflow: hidden; position: relative; text-align:center; padding:10px; margin-bottom:20px; } <div class="two">Kupo nuts here</div> <div class="five">Kupo nuts<br/>here</div> <div class="ten">Kupo<br/>nuts<br/>here</div> <div class="ten odd">Kupo<br/>nuts<br/>here</div>

应用于小元素的大圆角可能会产生一些有趣的效果。

虽然迟到了，但我在网上找到了这个小巧玲珑的工具。

https://kovart.github.io/dashed-border-generator/

<div style="width: 100%; height: 100vh; max-height: 20px; max-width: 100%; background: url('https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/themes/853636/settings_images/Ei2yf3t7TvyRpFaLQZiX_dot.jpg') #000; background-repeat: repeat;">&nbsp;</div>

这就是我所做的——使用图像 在这里输入图像描述

所以很多人都说“你不能”。是的，你可以。的确，css没有规则来控制破折号之间的排水沟空间，但css还有其他功能。不要急于说一件事做不到。

.hr {
    border-top: 5px dashed #CFCBCC;
    margin: 30px 0;
    position: relative;
}

.hr:before {
    background-color: #FFFFFF;
    content: "";
    height: 10px;
    position: absolute;
    top: -2px;
    width: 100%;
}

.hr:after {
    background-color: #FFFFFF;
    content: "";
    height: 10px;
    position: absolute;
    top: -13px;
    width: 100%;
}

基本上，border-top高度(在本例中为5px)是决定沟槽“宽度”的规则。当然，你需要调整颜色来匹配你的需要。这也是一个水平线的小例子，用左和右来做垂直线。