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

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

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

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

在我的情况下，我需要弯曲的角和薄边界，所以我想出了这个解决方案:

/* For showing dependencies between attributes */ :root { --border-width: 1px; --border-radius: 4px; --bg-color: #fff; } /* Required: */ .dropzone { position: relative; border: var(--border-width) solid transparent; border-radius: var(--border-radius); background-clip: padding-box; background-color: var(--bg-color); } .dropzone::before { content: ''; position: absolute; top: calc(var(--border-width) * -1); /* or without variables: 'top: -1px;' */ right: calc(var(--border-width) * -1); bottom: calc(var(--border-width) * -1); left: calc(var(--border-width) * -1); z-index: -1; background-image: repeating-linear-gradient(135deg, transparent 0 8px, var(--bg-color) 8px 16px); border-radius: var(--border-radius); background-color: rgba(0, 0, 0, 0.38); } /* Optional: */ html { background-color: #fafafb; display: flex; justify-content: center; } .dropzone { box-sizing: border-box; height: 168px; padding: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .dropzone::before { transition: background-color 0.2s ease-in-out; } .dropzone:hover::before { background-color: rgba(0, 0, 0, 0.87); } <div class='dropzone'> Drag 'n' drop some files here, or click to select files </div>

其思想是将svg模式放在元素后面，并仅显示该模式的细线作为元素边界。

这是我在最近的一个项目中使用的一个技巧，它几乎可以实现我想要的任何水平边框。每次需要水平边框时，我都使用<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属性。

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

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

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

我们需要有圆圈，这就是我们如何解决它:)

这或多或少是对需要样式化“border”的元素做的:

:before {
      position: absolute;
      width: 100%;
      height: 10px;
      top:0;
      left: 0;
      transform: translateY(-50%);
      content: '';
      background: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 18 10' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='5' cy='5' r='5' fill='%23f7f7f7'/%3e%3c/svg%3e");
    }

演示:https://codepen.io/arnoldsv/pen/PoWYxbg

这使用了标准的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>

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