我在我的方框中使用虚线样式的边框
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
我想增加边界上每个点之间的空间。
我在我的方框中使用虚线样式的边框
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
我想增加边界上每个点之间的空间。
当前回答
<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做到这一点——CSS3规范甚至对此有一个特定的引用:
注意:不能控制点和破折号的间距,也不能控制破折号的长度。实现被鼓励选择一个使角对称的间距。
但是,您可以使用边框图像或背景图像来实现此目的。
border-style的可用值请参阅MDN文档:
none:没有边框,设置宽度为0。 这是默认值。
hidden:与'none'相同,不同之处在于 边境冲突解决表 元素。 虚线:短的系列 破折号或线段。 点: 一系列的点。 双倍的:两连 加起来等于像素量的行 定义为border-width。 槽: 雕刻效果。 插图:制作盒子 嵌入的出现。 开始:相反的 “插图”。使盒子呈现3D (压花)。 脊:相对的 “槽”。边框显示为3D (出来)。 单体:单体, 直线,实线。
除了这些选择之外,没有任何方法可以影响标准边框的样式。
如果你不喜欢这种可能性,你可以使用CSS3的border-image,但请注意,浏览器对此的支持仍然非常不稳定(编辑:截至2020年,浏览器的支持很好)。
基于@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 >
这是我在最近的一个项目中使用的一个技巧,它几乎可以实现我想要的任何水平边框。每次需要水平边框时,我都使用<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。