下面是一个只使用CSS的解决方案，使用剪辑路径来掩盖多余的边界。与投票最多的答案不同，这个答案允许透明的背景。您还可以通过将剪辑路径圆形属性匹配到border-radius来使用get圆角边框。

.demo { 显示:inline-flex; 宽度:200 px; 身高:100 px; 位置:相对; 剪辑路径:插入(0圆30px 0 30px 0); ｝ {前.demo:: 内容:”; 位置:绝对的; 左:7 px; 上图:7 px; 右:7 px; 底部:7 px; 边框:8px虚线rgba(0,0,255, 0.3); 边框半径:37px 0 37px 0; box-sizing: border-box; ｝ < div class = "演示" > < / div >

这里有一个sass mixin给感兴趣的人

=dashed-border($size: 5px, $thickness: 1px, $color: black, $round: 0px)
    
    $corners: ''
    
    @for $i from 1 through length($round)
        $value: nth($round, $i)
        @if $value != 0
            $corners: unquote($corners + calc(#{$value} - #{$size}) + ' ')
        @else
            $corners: unquote($corners + #{$value} + ' ')
    
    clip-path: inset(0 round $corners)
    
    &::before
        content: ''
        position: absolute
        left: - $size + $thickness
        top: - $size + $thickness
        right: - $size + $thickness
        bottom: - $size + $thickness
        border: $size dashed $color
        border-radius: $round
        box-sizing: border-box

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

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

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

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

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

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

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

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

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

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

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

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

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

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