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

How to increase space between dotted border dots

提问by Kali Charan Rajput

I am using dotted style border in my box like

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

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

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

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

回答by Olivictor

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;

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.

您可以使用 background-size 调整大小，使用线性渐变百分比调整比例。在这个例子中，我有一条 1px 点和 2px 间距的虚线。这样你也可以使用多个背景有多个虚线边框。

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

在此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>

回答by Matt

Here's a trick I've used on a recent project to achieve nearly anything I want with horizontal borders. I use <hr/>each time I need an horizontal border. The basic way to add a border to this hr is something like

这是我在最近的一个项目中使用的一个技巧，几乎可以用水平边框实现我想要的任何东西。我<hr/>每次需要水平边框时都会使用。向此 hr 添加边框的基本方法类似于

 hr {border-bottom: 1px dotted #000;}

But if you want to take control of the border and, for example increase, the space between dots, you may try something like this:

但是如果你想控制边界，例如增加点之间的空间，你可以尝试这样的事情：

hr {
height:14px; /* specify a height for this hr */
overflow:hidden;
}

And in the following, you create your border (here's an example with dots)

在下面，你创建你的边框（这是一个带点的例子）

hr:after {
content:".......................................................................";
letter-spacing: 4px; /* Use letter-spacing to increase space between dots*/
}

This also means that you can add text-shadow to the dots, gradients etc. Anything you want...

这也意味着你可以为点、渐变等添加文本阴影。任何你想要的......

Well, it works really great for horizontal borders. If you need vertical ones, you may specify a class for another hr and use the CSS3 rotationproperty.

嗯，它对水平边框非常有效。如果您需要垂直的，您可以为另一个 hr 指定一个类并使用 CSS3rotation属性。

回答by Shadikka

You cannot do it with pure CSS - the CSS3 speceven has a specific quote about this:

你不能用纯 CSS 做到这一点——CSS3 规范甚至有一个关于这个的具体引用：

Note: There is no control over the spacing of the dots and dashes, nor over the length of the dashes. Implementations are encouraged to choose a spacing that makes the corners symmetrical.

注意：无法控制点和划线的间距，也无法控制划线的长度。鼓励实现选择使角对称的间距。

You can, however, use either a border-imageor a background image that does the trick.

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

回答by lenioia

This uses the standard CSS border and a pseudo element+overflow:hidden. In the example you get three different 2px dashed borders: normal, spaced like a 5px, spaced like a 10px. Is actually 10px with only 10-8=2px visible.

这使用标准的 CSS 边框和伪元素+溢出：隐藏。在这个例子中，你会得到三个不同的 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>

Applied to small elements with big rounded corners may make for some fun effects.

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

回答by Ukuser32

So starting with the answer given and applying the fact that CSS3 allows multiple settings - the below code is useful for creating a complete box:

因此，从给出的答案开始并应用 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>

Its worth noting that the 10px in the background size gives the area that the dash and gap will cover. The 50% of the background tag is how wide the dash actually is. It is therefore possible to have different length dashes on each border side.

值得注意的是，背景大小中的 10px 给出了破折号和间隙将覆盖的区域。背景标签的 50% 是破折号的实际宽度。因此，可以在每个边界边上使用不同长度的破折号。

回答by Pekka

See the MDN docsfor the available values for border-style:

请参阅MDN 文档以了解以下内容的可用值border-style：

• none : No border, sets width to 0. This is the default value.
• hidden : Same as 'none', except in terms of border conflict resolution for table elements.
• dashed : Series of short dashes or line segments.
• dotted : Series of dots.
• double : Two straight lines that add up to the pixel amount defined as border-width.
• groove : Carved effect.
• inset : Makes the box appear embedded.
• outset : Opposite of 'inset'. Makes the box appear 3D (embossed).
• ridge : Opposite of 'groove'. The border appears 3D (coming out).
• solid : Single, straight, solid line.

• none ：无边框，将宽度设置为 0。这是默认值。
• hidden : 与 'none' 相同，除了表格元素的边界冲突解决方案。
• dashed ：一系列短划线或线段。
• dotted ：点系列。
• double ：两条直线加起来定义为边框宽度的像素量。
• 凹槽：雕刻效果。
• inset ：使框看起来嵌入。
• 开始：与“插入”相反。使框呈现 3D（浮雕）。
• 脊：与“凹槽”相对。边框显示为 3D（出来）。
• solid ：单条、直线、实线。

Apart from those choices, there is no way to influence the standard border's style.

除了这些选择，没有办法影响标准边框的样式。

If the possibilities there are not to your liking, you coulduse CSS3's border-imagebut note that browser support for this is still very spotty.

如果您不喜欢这种可能性，您可以使用 CSS3，border-image但请注意，浏览器对此的支持仍然参差不齐。

回答by Aleksander Stelmaczonek

Building 4 edges solution basing on @Eagorajose's answer with shorthand syntax:

使用速记语法基于@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>

回答by Marten Koetsier

This is an old, but still very relevant topic. The current top answerworks well, but only for very small dots. As Bhojendra Rauniyar already pointed out in the comments, for larger (>2px) dots, the dots appear square, not round. I found this page searching for spaced dots, not spaced squares(or even dashes, as some answers here use).

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

Building on this, I used radial-gradient. Also, using the answer from Ukuser32, the dot-properties can easily be repeated for all four borders. Only the corners are not perfect.

在此基础上，我使用了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>

The radial-gradientexpects:

该radial-gradient预期：

• the shape and optional position
• two or more stops: a color and radius

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

Here, I wanted a 5 pixel diameter (2.5px radius) dot, with 2 times the diameter (10px) between the dots, adding up to 15px. The background-sizeshould match these.

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

The two stops are defined such that the dot is nice and smooth: solid black for half the radius and than a gradient to the full radius.

两个停靠点的定义使点漂亮且平滑：一半半径为纯黑色，而不是整个半径的渐变。

回答by Nick Angiolillo

This is a really old question but it has a high ranking in Google so I'm going to throw in my method which could work depending on your needs.

这是一个非常古老的问题，但它在 Google 中排名很高，因此我将使用我的方法，该方法可以根据您的需要工作。

In my case, I wanted a thick dashed border that had a minimal break in between dashes. I used a CSS pattern generator (like this one: http://www.patternify.com/) to create a 10px wide by 1px tall pattern. 9px of that is solid dash color, 1px is white.

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

In my CSS, I included that pattern as the background image, and then scaled it up by using the background-size attribute. I ended up with a 20px by 2px repeated dash, 18px of that being solid line and 2px white. You could scale it up even more for a really thick dashed line.

在我的 CSS 中，我将该图案包含为背景图像，然后使用 background-size 属性将其放大。我最终得到了一个 20 像素 x 2 像素的重复短划线，其中 18 像素是实线，2 像素是白色。您可以将其放大为非常粗的虚线。

The nice thing is since the image is encoded as data you don't have the additional outside HTTP request, so there's no performance burden. I stored my image as a SASS variable so I could reuse it in my site.

好消息是因为图像被编码为数据，你没有额外的外部 HTTP 请求，所以没有性能负担。我将我的图像存储为 SASS 变量，以便我可以在我的站点中重复使用它。

回答by devinfd

So many people are say "You can't". Yes you can. It's true that there is not a css rule to control the gutter space between the dashes but css has other abilities. Don't be so quick to say that a thing can not be done.

所以很多人都说“你不能”。是的你可以。确实没有 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%;
}

Basically the border-top height (5px in this case) is the rule that determines the gutter "width". OIf course you would need to adjust the colors to match your needs. This also is a small example for a horizontal line, use left and right to make the vertical line.

基本上边框顶部高度（在这种情况下为 5px）是确定装订线“宽度”的规则。O如果您当然需要调整颜色以满足您的需要。这也是一个水平线的小例子，用left和right做垂直线。