我在我的方框中使用虚线样式的边框
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
我想增加边界上每个点之间的空间。
当前回答
哎呀，没有办法做到这一点。你可以使用一个虚线边界或可能增加边界的宽度一点，但只是得到更多的间隔点是不可能的CSS。
其他回答
虽然迟到了，但我在网上找到了这个小巧玲珑的工具。
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边框和一个伪元素+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
基于@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 >
