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

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

border-style的可用值请参阅MDN文档:

none:没有边框，设置宽度为0。 这是默认值。

hidden:与'none'相同，不同之处在于 边境冲突解决表 元素。 虚线:短的系列 破折号或线段。 点: 一系列的点。 双倍的:两连 加起来等于像素量的行 定义为border-width。 槽: 雕刻效果。 插图:制作盒子 嵌入的出现。 开始:相反的 “插图”。使盒子呈现3D (压花)。 脊:相对的 “槽”。边框显示为3D (出来)。 单体:单体， 直线，实线。

除了这些选择之外，没有任何方法可以影响标准边框的样式。

如果你不喜欢这种可能性，你可以使用CSS3的border-image，但请注意，浏览器对此的支持仍然非常不稳定(编辑:截至2020年，浏览器的支持很好)。

简单的回答:你不能。

你将不得不使用border-image属性和一些图像。

所以很多人都说“你不能”。是的，你可以。的确，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)是决定沟槽“宽度”的规则。当然，你需要调整颜色来匹配你的需要。这也是一个水平线的小例子，用左和右来做垂直线。

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

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

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

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

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

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