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

/*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>

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

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

我做了一个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>

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

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

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

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

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

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

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

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

<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>

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