如何增加虚线边界点之间的空间

我在我的方框中使用虚线样式的边框

.box {
    width: 300px;
    height: 200px;
    border: dotted 1px #f00;
    float: left;
}

我想增加边界上每个点之间的空间。

当前回答

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

2022-04-04 12:44:53

其他回答

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

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

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

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

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

2011-06-06 10:03:03

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

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

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

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

2014-11-10 16:12:00

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

2011-06-06 10:03:33

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

2019-08-04 23:01:29