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

.box {
    width: 300px;
    height: 200px;
    border: dotted 1px #f00;
    float: left;
}

我想增加边界上每个点之间的空间。


当前回答

如果你只针对现代浏览器,并且你可以在一个独立的元素上设置边框,那么你可以使用CSS缩放变换来获得一个更大的点或破折号:

border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);

它需要大量的位置调整才能让它对齐,但它是有效的。通过改变边框的厚度,起始大小和比例因子,你可以得到你想要的厚度-长度比。你唯一不能碰的就是缺口比。

其他回答

这是我在最近的一个项目中使用的一个技巧,它几乎可以实现我想要的任何水平边框。每次需要水平边框时,我都使用<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做到这一点——CSS3规范甚至对此有一个特定的引用:

注意:不能控制点和破折号的间距,也不能控制破折号的长度。实现被鼓励选择一个使角对称的间距。

但是,您可以使用边框图像或背景图像来实现此目的。

这是一个古老但仍然非常相关的话题。目前最上面的答案很好,但只适用于非常小的点。正如Bhojendra Rauniyar已经在评论中指出的,对于较大的点(>2px),点看起来是方形的,而不是圆形的。我发现这个页面搜索的是间隔点,而不是间隔方块(甚至破折号,就像这里的一些答案使用的那样)。

在此基础上,我使用了径向梯度。同样,使用Ukuser32的答案,可以很容易地为所有四个边框重复点属性。只有角落不完美。

div { padding: 1em; background-image: radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px), radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px), radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px), radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px); background-position: top, right, bottom, left; background-size: 15px 5px, 5px 15px; background-repeat: repeat-x, repeat-y; } <div>Some content with round, spaced dots as border</div>

径向梯度期望:

形状和可选位置 两个或更多的停止:一个颜色和半径

在这里,我想要一个直径为5像素(半径为2.5px)的点,点之间的直径为2倍(10px),加起来为15px。背景尺寸应该与这些相匹配。

这两个站点的定义是这样的点是漂亮的和光滑的:纯黑色的一半半径和比梯度到整个半径。

你可以创建一个画布(通过javascript)并在里面画一条虚线。在画布内,您可以控制多长破折号和之间的空间应该。

这是一个非常老的问题,但它在谷歌中有很高的排名,所以我将抛出我的方法,它可以根据你的需要工作。

在我的例子中,我想要一个粗虚线边界,在虚线之间有一个最小的中断。我用一个CSS图案生成器(比如:http://www.patternify.com/)创建了一个10px宽1px高的图案。其中9px为纯色,1px为白色。

在我的CSS中,我将该图案作为背景图像,然后使用background-size属性将其放大。我最终得到了一个20px * 2px的重复破折号,18px的实线和2px的白色。你可以把虚线放大一点。

好的方面是,由于图像被编码为数据,因此不需要额外的外部HTTP请求,因此没有性能负担。我将图像存储为SASS变量,以便在我的站点中重用它。