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

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

所以从给出的答案开始，应用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%是虚线的实际宽度。因此，可以在每条边界上使用不同长度的破折号。

你不能用纯CSS做到这一点——CSS3规范甚至对此有一个特定的引用:

注意:不能控制点和破折号的间距，也不能控制破折号的长度。实现被鼓励选择一个使角对称的间距。

但是，您可以使用边框图像或背景图像来实现此目的。

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

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

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

这个技巧对水平和垂直边框都有效:

/*Horizontal*/
background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;

/*Vertical*/
background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;

你可以用background-size调整大小，用线性梯度百分比调整比例。在这个例子中，我有一条1px的点和2px的间距的虚线。 这样你也可以使用多个背景来创建多个虚线边界。

在这个JSFiddle中尝试一下，或者看看代码片段示例:

div { padding: 10px 50px; } .dotted { border-top: 1px #333 dotted; } .dotted-gradient { background-image: linear-gradient(to right, #333 40%, rgba(255, 255, 255, 0) 20%); background-position: top; background-size: 3px 1px; background-repeat: repeat-x; } .dotted-spaced { background-image: linear-gradient(to right, #333 10%, rgba(255, 255, 255, 0) 0%); background-position: top; background-size: 10px 1px; background-repeat: repeat-x; } .left { float: left; padding: 40px 10px; background-color: #F0F0DA; } .left.dotted { border-left: 1px #333 dotted; border-top: none; } .left.dotted-gradient { background-image: linear-gradient(to bottom, #333 40%, rgba(255, 255, 255, 0) 20%); background-position: left; background-size: 1px 3px; background-repeat: repeat-y; } .left.dotted-spaced { background-image: linear-gradient(to bottom, #333 10%, rgba(255, 255, 255, 0) 0%); background-position: left; background-size: 1px 10px; background-repeat: repeat-y; } <div>no <br>border</div> <div class='dotted'>dotted <br>border</div> <div class='dotted-gradient'>dotted <br>with gradient</div> <div class='dotted-spaced'>dotted <br>spaced</div> <div class='left'>no <br>border</div> <div class='dotted left'>dotted <br>border</div> <div class='dotted-gradient left'>dotted <br>with gradient</div> <div class='dotted-spaced left'>dotted <br>spaced</div>

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

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