如何增加虚线边框点之间的间距 [英] How to increase space between dotted border dots

问题描述

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

I am using dotted style border in my box like

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

我想增加边框每个点之间的距离。 p>

I want to the increase the space between each dot of the border.

推荐答案

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

This trick works for both horizontal and vertical borders:

/*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间距的虚线。
这种方式你也可以使用多个背景的多个虚线边框。

You can adjust the size with background-size and the proportion with the linear-gradient percentages. In this example I have a dotted line of 1px dots and 2px spacing. This way you can have multiple dotted borders too using multiple backgrounds.

尝试在这 JSFiddle 或查看代码段示例：

Try it in this JSFiddle or take a look at the code snippet example:

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>

这篇关于如何增加虚线边框点之间的间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！