我在我的方框中使用虚线样式的边框
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
我想增加边界上每个点之间的空间。
我在我的方框中使用虚线样式的边框
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
我想增加边界上每个点之间的空间。
当前回答
哎呀,没有办法做到这一点。你可以使用一个虚线边界或可能增加边界的宽度一点,但只是得到更多的间隔点是不可能的CSS。
其他回答
<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没有规则来控制破折号之间的排水沟空间,但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)是决定沟槽“宽度”的规则。当然,你需要调整颜色来匹配你的需要。这也是一个水平线的小例子,用左和右来做垂直线。
你可以创建一个画布(通过javascript)并在里面画一条虚线。在画布内,您可以控制多长破折号和之间的空间应该。
border-style的可用值请参阅MDN文档:
none:没有边框,设置宽度为0。 这是默认值。
hidden:与'none'相同,不同之处在于 边境冲突解决表 元素。 虚线:短的系列 破折号或线段。 点: 一系列的点。 双倍的:两连 加起来等于像素量的行 定义为border-width。 槽: 雕刻效果。 插图:制作盒子 嵌入的出现。 开始:相反的 “插图”。使盒子呈现3D (压花)。 脊:相对的 “槽”。边框显示为3D (出来)。 单体:单体, 直线,实线。
除了这些选择之外,没有任何方法可以影响标准边框的样式。
如果你不喜欢这种可能性,你可以使用CSS3的border-image,但请注意,浏览器对此的支持仍然非常不稳定(编辑:截至2020年,浏览器的支持很好)。
虽然迟到了,但我在网上找到了这个小巧玲珑的工具。
https://kovart.github.io/dashed-border-generator/