我做了一个javascript函数，用svg创建点。你可以在javascript代码中调整点间距和大小。

var make_dotted_borders = function() { // EDIT THESE SETTINGS: var spacing = 8; var dot_width = 2; var dot_height = 2; //--------------------- var dotteds = document.getElementsByClassName("dotted"); for (var i = 0; i < dotteds.length; i++) { var width = dotteds[i].clientWidth + 1.5; var height = dotteds[i].clientHeight; var horizontal_count = Math.floor(width / spacing); var h_spacing_percent = 100 / horizontal_count; var h_subtraction_percent = ((dot_width / 2) / width) * 100; var vertical_count = Math.floor(height / spacing); var v_spacing_percent = 100 / vertical_count; var v_subtraction_percent = ((dot_height / 2) / height) * 100; var dot_container = document.createElement("div"); dot_container.classList.add("dot_container"); dot_container.style.display = getComputedStyle(dotteds[i], null).display; var clone = dotteds[i].cloneNode(true); dotteds[i].parentElement.replaceChild(dot_container, dotteds[i]); dot_container.appendChild(clone); for (var x = 0; x < horizontal_count; x++) { // The Top Dots var dot = document.createElement("div"); dot.classList.add("dot"); dot.style.width = dot_width + "px"; dot.style.height = dot_height + "px"; var left_percent = (h_spacing_percent * x) - h_subtraction_percent; dot.style.left = left_percent + "%"; dot.style.top = (-dot_height / 2) + "px"; dot_container.appendChild(dot); // The Bottom Dots var dot = document.createElement("div"); dot.classList.add("dot"); dot.style.width = dot_width + "px"; dot.style.height = dot_height + "px"; dot.style.left = (h_spacing_percent * x) - h_subtraction_percent + "%"; dot.style.top = height - (dot_height / 2) + "px"; dot_container.appendChild(dot); } for (var y = 1; y < vertical_count; y++) { // The Left Dots: var dot = document.createElement("div"); dot.classList.add("dot"); dot.style.width = dot_width + "px"; dot.style.height = dot_height + "px"; dot.style.left = (-dot_width / 2) + "px"; dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%"; dot_container.appendChild(dot); } for (var y = 0; y < vertical_count + 1; y++) { // The Right Dots: var dot = document.createElement("div"); dot.classList.add("dot"); dot.style.width = dot_width + "px"; dot.style.height = dot_height + "px"; dot.style.left = width - (dot_width / 2) + "px"; if (y < vertical_count) { dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%"; } else { dot.style.top = height - (dot_height / 2) + "px"; } dot_container.appendChild(dot); } } } make_dotted_borders(); div.dotted { display: inline-block; padding: 0.5em; } div.dot_container { position: relative; margin-left: 0.25em; margin-right: 0.25em; } div.dot { position: absolute; content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><circle cx="50" cy="50" r="50" fill="black" /></svg>'); } <div class="dotted">Lorem Ipsum</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)是决定沟槽“宽度”的规则。当然，你需要调整颜色来匹配你的需要。这也是一个水平线的小例子，用左和右来做垂直线。

我做了一个javascript函数，用svg创建点。你可以在javascript代码中调整点间距和大小。

var make_dotted_borders = function() { // EDIT THESE SETTINGS: var spacing = 8; var dot_width = 2; var dot_height = 2; //--------------------- var dotteds = document.getElementsByClassName("dotted"); for (var i = 0; i < dotteds.length; i++) { var width = dotteds[i].clientWidth + 1.5; var height = dotteds[i].clientHeight; var horizontal_count = Math.floor(width / spacing); var h_spacing_percent = 100 / horizontal_count; var h_subtraction_percent = ((dot_width / 2) / width) * 100; var vertical_count = Math.floor(height / spacing); var v_spacing_percent = 100 / vertical_count; var v_subtraction_percent = ((dot_height / 2) / height) * 100; var dot_container = document.createElement("div"); dot_container.classList.add("dot_container"); dot_container.style.display = getComputedStyle(dotteds[i], null).display; var clone = dotteds[i].cloneNode(true); dotteds[i].parentElement.replaceChild(dot_container, dotteds[i]); dot_container.appendChild(clone); for (var x = 0; x < horizontal_count; x++) { // The Top Dots var dot = document.createElement("div"); dot.classList.add("dot"); dot.style.width = dot_width + "px"; dot.style.height = dot_height + "px"; var left_percent = (h_spacing_percent * x) - h_subtraction_percent; dot.style.left = left_percent + "%"; dot.style.top = (-dot_height / 2) + "px"; dot_container.appendChild(dot); // The Bottom Dots var dot = document.createElement("div"); dot.classList.add("dot"); dot.style.width = dot_width + "px"; dot.style.height = dot_height + "px"; dot.style.left = (h_spacing_percent * x) - h_subtraction_percent + "%"; dot.style.top = height - (dot_height / 2) + "px"; dot_container.appendChild(dot); } for (var y = 1; y < vertical_count; y++) { // The Left Dots: var dot = document.createElement("div"); dot.classList.add("dot"); dot.style.width = dot_width + "px"; dot.style.height = dot_height + "px"; dot.style.left = (-dot_width / 2) + "px"; dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%"; dot_container.appendChild(dot); } for (var y = 0; y < vertical_count + 1; y++) { // The Right Dots: var dot = document.createElement("div"); dot.classList.add("dot"); dot.style.width = dot_width + "px"; dot.style.height = dot_height + "px"; dot.style.left = width - (dot_width / 2) + "px"; if (y < vertical_count) { dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%"; } else { dot.style.top = height - (dot_height / 2) + "px"; } dot_container.appendChild(dot); } } } make_dotted_borders(); div.dotted { display: inline-block; padding: 0.5em; } div.dot_container { position: relative; margin-left: 0.25em; margin-right: 0.25em; } div.dot { position: absolute; content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><circle cx="50" cy="50" r="50" fill="black" /></svg>'); } <div class="dotted">Lorem Ipsum</div>

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

/* 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模式放在元素后面，并仅显示该模式的细线作为元素边界。

基于@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 >

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

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