我在我的方框中使用虚线样式的边框
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
我想增加边界上每个点之间的空间。
当前回答
你不能用纯CSS做到这一点——CSS3规范甚至对此有一个特定的引用:
注意:不能控制点和破折号的间距，也不能控制破折号的长度。实现被鼓励选择一个使角对称的间距。
但是，您可以使用边框图像或背景图像来实现此目的。
其他回答
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>
这就是我所做的——使用图像 在这里输入图像描述
简单的回答:你不能。
你将不得不使用border-image属性和一些图像。
我们需要有圆圈，这就是我们如何解决它:)
这或多或少是对需要样式化“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
你不能用纯CSS做到这一点——CSS3规范甚至对此有一个特定的引用:
注意:不能控制点和破折号的间距，也不能控制破折号的长度。实现被鼓励选择一个使角对称的间距。
但是，您可以使用边框图像或背景图像来实现此目的。
