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

所以从给出的答案开始，应用CSS3允许多个设置的事实-下面的代码对于创建一个完整的框是有用的:

#border { width: 200px; height: 100px; background: yellow; text-align: center; line-height: 100px; background: linear-gradient(to right, orange 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(blue 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(to right, green 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(red 50%, rgba(255, 255, 255, 0) 0%); background-position: top, right, bottom, left; background-repeat: repeat-x, repeat-y; background-size: 10px 1px, 1px 10px; } <div id="border"> bordered area </div>

值得注意的是，背景大小的10px给出了破折号和空白将覆盖的区域。背景标签的50%是虚线的实际宽度。因此，可以在每条边界上使用不同长度的破折号。

下面是一个只使用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

简单的回答:你不能。

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

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

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

哎呀，没有办法做到这一点。你可以使用一个虚线边界或可能增加边界的宽度一点，但只是得到更多的间隔点是不可能的CSS。