我在我的方框中使用虚线样式的边框
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
我想增加边界上每个点之间的空间。
我在我的方框中使用虚线样式的边框
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
我想增加边界上每个点之间的空间。
当前回答
虽然迟到了,但我在网上找到了这个小巧玲珑的工具。
https://kovart.github.io/dashed-border-generator/
其他回答
border-style的可用值请参阅MDN文档:
none:没有边框,设置宽度为0。 这是默认值。
hidden:与'none'相同,不同之处在于 边境冲突解决表 元素。 虚线:短的系列 破折号或线段。 点: 一系列的点。 双倍的:两连 加起来等于像素量的行 定义为border-width。 槽: 雕刻效果。 插图:制作盒子 嵌入的出现。 开始:相反的 “插图”。使盒子呈现3D (压花)。 脊:相对的 “槽”。边框显示为3D (出来)。 单体:单体, 直线,实线。
除了这些选择之外,没有任何方法可以影响标准边框的样式。
如果你不喜欢这种可能性,你可以使用CSS3的border-image,但请注意,浏览器对此的支持仍然非常不稳定(编辑:截至2020年,浏览器的支持很好)。
<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;"> </div>
这就是我所做的——使用图像 在这里输入图像描述
下面是一个只使用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。
如果你只针对现代浏览器,并且你可以在一个独立的元素上设置边框,那么你可以使用CSS缩放变换来获得一个更大的点或破折号:
border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);
它需要大量的位置调整才能让它对齐,但它是有效的。通过改变边框的厚度,起始大小和比例因子,你可以得到你想要的厚度-长度比。你唯一不能碰的就是缺口比。