如何增加虚线边框点之间的空间

您可以创建画布（通过javascript）并在其中绘制虚线。在画布内，您可以控制破折号及其之间的间隔应有多长。

AFAIK没有办法做到这一点。您可以使用虚线边框，也可以稍微增加边框的宽度，但是CSS不可能获得更多的点距。

根据@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 */

#page {
    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 */
    
    width: 100px;
    height: 100px;
}

<div id="page"></div>

如果您只针对现代浏览器，并且可以将边框与内容分开放置在另一个元素上，则可以使用CSS比例转换获得更大的点或破折号：

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

要使其对齐，需要进行很多位置调整，但是它可以工作。通过更改边框的厚度，起始大小和比例因子，您可以达到所需的厚度与长度的比例。唯一无法触及的是破折号比例。

简短的回答：不能。

您将必须使用border-image属性和一些图像。

这么多人说“你不能”。是的你可以。的确，没有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%;
}

基本上，边框顶部的高度（在这种情况下为5px）是确定装订线“宽度”的规则。O如果需要，则需要调整颜色以满足您的需求。这也是一条水平线的小例子，使用左右两边制作垂直线。

这是一个很老的问题，但是在Google中排名很高，因此我将介绍一种可以根据您的需求使用的方法。

就我而言，我想要一个粗的虚线边框，使虚线之间的间隔最小。我使用了CSS模式生成器（像这样的一个：http : //www.patternify.com/）来创建一个10px宽x 1px高的模式。其中9px是纯破折号颜色，1px是白色。

在我的CSS中，我将该模式包含为背景图像，然后使用background-size属性将其放大。我最终得到20px x 2px的重复破折号，其中18px是实线，2px是白色。您可以将其放大甚至更多，以获得真正的粗虚线。

令人高兴的是，由于图像被编码为数据，因此您没有其他外部HTTP请求，因此没有性能负担。我将图片存储为SASS变量，因此可以在自己的网站中重复使用它。

这是一个古老但仍然很相关的话题。在目前顶级的回答很好，但仅限于非常小的点工作。正如Bhojendra Rauniyar在评论中指出的那样，对于较大的点（> 2px），这些点显示为正方形而不是圆形。我发现此页面搜索的是间隔的点，而不是间隔的正方形（甚至是破折号，如此处的某些答案所示）。

我以此为基础radial-gradient。同样，使用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>

该radial-gradient 预期：

• 形状和位置
• 两个或多个停靠点：颜色和半径

在这里，我想要一个5像素直径（2.5像素半径）的点，其点之间的直径（10像素）的2倍，总计15像素。本background-size应与这些。

定义两个停靠点时，圆点既美观又平滑：半径为一半的纯黑色，而不是整个半径的渐变。

您不能使用纯CSS做到这一点-CSS3规范甚至对此都有特定的报价：

注意：无法控制点和破折号的间距，也不能控制破折号的长度。鼓励实现者选择使角对称的间距。

但是，您可以使用边框图像或背景图像来解决问题。

这使用标准CSS边框和伪元素+ overflow：hidden。在示例中，您将获得三个不同的2px虚线边框：正常，间距为5px，间距为10px。实际上是10px，只有10-8 = 2px可见。

div.two{border:2px dashed #FF0000}

div.five:before {
  content: "";
  position: absolute;
  border: 5px dashed #FF0000;
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
}

div.ten:before {
  content: "";
  position: absolute;
  border: 10px dashed #FF0000;
  top: -8px;
  bottom: -8px;
  left: -8px;
  right: -8px;
}

div.odd:before {left:0;right:0;border-radius:60px}

div {
  overflow: hidden;
  position: relative;


  text-align:center;
  padding:10px;
  margin-bottom:20px;
}

<div class="two">Kupo nuts here</div>
<div class="five">Kupo nuts<br/>here</div>
<div class="ten">Kupo<br/>nuts<br/>here</div>
<div class="ten odd">Kupo<br/>nuts<br/>here</div>

应用于带有大圆角的小元素可能会带来一些有趣的效果。

因此，从给出的答案开始，并应用CSS3允许进行多种设置的事实-以下代码对于创建完整的盒子很有用：

#border {
  width: 200px;
  height: 100px;
  background: yellow;
  text-align: center;
  line-height: 100px;
  background: linear-gradient(to right, orange 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(blue 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(to right, green 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(red 50%, rgba(255, 255, 255, 0) 0%);
  background-position: top, right, bottom, left;
  background-repeat: repeat-x, repeat-y;
  background-size: 10px 1px, 1px 10px;
}

<div id="border">
  bordered area
</div>

值得注意的是，背景尺寸中的10px表示破折号和间隙将覆盖的区域。背景标记的50％是破折号的实际宽度。因此，可以在每个边界侧具有不同的长度虚线。

这是我在最近的项目中使用的一个技巧，几乎可以用水平边框实现我想要的任何功能。我<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*/
}

这也意味着您可以将文本阴影添加到点，渐变等。任何您想要的...

好吧，它非常适合水平边框。如果您需要垂直的，则可以为另一个小时指定一个类，并使用CSS3 rotation属性。