我在我的方框中使用虚线样式的边框
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
我想增加边界上每个点之间的空间。
我在我的方框中使用虚线样式的边框
.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
其他回答
如果你只针对现代浏览器,并且你可以在一个独立的元素上设置边框,那么你可以使用CSS缩放变换来获得一个更大的点或破折号:
border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);
它需要大量的位置调整才能让它对齐,但它是有效的。通过改变边框的厚度,起始大小和比例因子,你可以得到你想要的厚度-长度比。你唯一不能碰的就是缺口比。
这是一个古老但仍然非常相关的话题。目前最上面的答案很好,但只适用于非常小的点。正如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。背景尺寸应该与这些相匹配。
这两个站点的定义是这样的点是漂亮的和光滑的:纯黑色的一半半径和比梯度到整个半径。
你不能用纯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 >
虽然迟到了,但我在网上找到了这个小巧玲珑的工具。
https://kovart.github.io/dashed-border-generator/