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

Question

我在我的盒子里使用虚线样式的边框

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

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

原文由 Kali Charan Rajput 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这个技巧适用于水平和垂直边框：

 /*Horizontal*/
background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;

/*Vertical*/
background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;

您可以使用 background-size 调整大小，使用 linear-gradient percentages 调整比例。在这个例子中，我有一条 1px 点和 2px 间距的虚线。这样，您也可以使用多个背景来拥有多个虚线边框。

在这个 JSFiddle 中尝试它或查看代码片段示例：

 div {
  padding: 10px 50px;
}
.dotted {
  border-top: 1px #333 dotted;
}
.dotted-gradient {
  background-image: linear-gradient(to right, #333 40%, rgba(255, 255, 255, 0) 20%);
  background-position: top;
  background-size: 3px 1px;
  background-repeat: repeat-x;
}
.dotted-spaced {
  background-image: linear-gradient(to right, #333 10%, rgba(255, 255, 255, 0) 0%);
  background-position: top;
  background-size: 10px 1px;
  background-repeat: repeat-x;
}
.left {
  float: left;
  padding: 40px 10px;
  background-color: #F0F0DA;
}
.left.dotted {
  border-left: 1px #333 dotted;
  border-top: none;
}
.left.dotted-gradient {
  background-image: linear-gradient(to bottom, #333 40%, rgba(255, 255, 255, 0) 20%);
  background-position: left;
  background-size: 1px 3px;
  background-repeat: repeat-y;
}
.left.dotted-spaced {
  background-image: linear-gradient(to bottom, #333 10%, rgba(255, 255, 255, 0) 0%);
  background-position: left;
  background-size: 1px 10px;
  background-repeat: repeat-y;
}

 <div>no
  <br>border</div>
<div class='dotted'>dotted
  <br>border</div>
<div class='dotted-gradient'>dotted
  <br>with gradient</div>
<div class='dotted-spaced'>dotted
  <br>spaced</div>

<div class='left'>no
  <br>border</div>
<div class='dotted left'>dotted
  <br>border</div>
<div class='dotted-gradient left'>dotted
  <br>with gradient</div>
<div class='dotted-spaced left'>dotted
  <br>spaced</div>

原文由 Olivictor 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

原文由 Matt 发布，翻译遵循 CC BY-SA 3.0 许可协议