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

.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

其他回答

这是我在最近的一个项目中使用的一个技巧,它几乎可以实现我想要的任何水平边框。每次需要水平边框时,我都使用<hr/>。给这个hr添加边框的基本方法是

 hr {border-bottom: 1px dotted #000;}

但如果你想控制边界,例如增加点之间的间距,你可以尝试这样做:

hr {
height:14px; /* specify a height for this hr */
overflow:hidden;
}

在下面,你创建你的边界(这里是一个点的例子)

hr:after {
content:".......................................................................";
letter-spacing: 4px; /* Use letter-spacing to increase space between dots*/
}

这也意味着你可以添加文本阴影的点,梯度等。你想要什么都行……

它对水平边界非常有效。如果你需要垂直的,你可以为另一个hr指定一个类,并使用CSS3的rotation属性。

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

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

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

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

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

我们需要有圆圈,这就是我们如何解决它:)

这或多或少是对需要样式化“border”的元素做的:

:before {
      position: absolute;
      width: 100%;
      height: 10px;
      top:0;
      left: 0;
      transform: translateY(-50%);
      content: '';
      background: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 18 10' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='5' cy='5' r='5' fill='%23f7f7f7'/%3e%3c/svg%3e");
    }

演示:https://codepen.io/arnoldsv/pen/PoWYxbg

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

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

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

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