我在我的方框中使用虚线样式的边框
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
我想增加边界上每个点之间的空间。
当前回答
简单的回答:你不能。
你将不得不使用border-image属性和一些图像。
其他回答
这是我在最近的一个项目中使用的一个技巧，它几乎可以实现我想要的任何水平边框。每次需要水平边框时，我都使用<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属性。
这使用了标准的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>
应用于小元素的大圆角可能会产生一些有趣的效果。
哎呀，没有办法做到这一点。你可以使用一个虚线边界或可能增加边界的宽度一点，但只是得到更多的间隔点是不可能的CSS。
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
