我在我的方框中使用虚线样式的边框
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
我想增加边界上每个点之间的空间。
我在我的方框中使用虚线样式的边框
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
我想增加边界上每个点之间的空间。
当前回答
所以很多人都说“你不能”。是的,你可以。的确,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)是决定沟槽“宽度”的规则。当然,你需要调整颜色来匹配你的需要。这也是一个水平线的小例子,用左和右来做垂直线。
其他回答
虽然迟到了,但我在网上找到了这个小巧玲珑的工具。
https://kovart.github.io/dashed-border-generator/
<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: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);
它需要大量的位置调整才能让它对齐,但它是有效的。通过改变边框的厚度,起始大小和比例因子,你可以得到你想要的厚度-长度比。你唯一不能碰的就是缺口比。
这使用了标准的CSS边框和一个伪元素+overflow:hidden。 在这个例子中,你得到了三个不同的2px虚线边界:normal,间隔为5px,间隔为10px。实际上是10px,只有10-8=2px可见。
div.two{border:2px dashed #FF0000} div.five:before { content: ""; position: absolute; border: 5px dashed #FF0000; top: -3px; bottom: -3px; left: -3px; right: -3px; } div.ten:before { content: ""; position: absolute; border: 10px dashed #FF0000; top: -8px; bottom: -8px; left: -8px; right: -8px; } div.odd:before {left:0;right:0;border-radius:60px} div { overflow: hidden; position: relative; text-align:center; padding:10px; margin-bottom:20px; } <div class="two">Kupo nuts here</div> <div class="five">Kupo nuts<br/>here</div> <div class="ten">Kupo<br/>nuts<br/>here</div> <div class="ten odd">Kupo<br/>nuts<br/>here</div>
应用于小元素的大圆角可能会产生一些有趣的效果。
我们需要有圆圈,这就是我们如何解决它:)
这或多或少是对需要样式化“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