如何增加虚线边框之间的距离

Question

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

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

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

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;

您可以使用背景大小调整大小，并使用线性渐变百分比调整比例。在此示例中，我有一条虚线为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>