我在我的方框中使用虚线样式的边框

.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;">&nbsp;</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。