如何增加点线边框之间的间距

border是一个简写的CSS属性，用来定义元素的边框。它指定了border-width、border-style和border-color的值。

border-color属性确定边框的颜色。
border-style属性指定边框的样式。
border-width属性确定边框的宽度。

border-style CSS属性定义了元素四个边框的线条样式。它是border-bottom-style、border-left-style、border-right-style和border-top-style的简写。可选择的边框样式如下：none、solid、dotted、dashed、double、groove、ridge、inset、outset和hidden。

当 border-style 的值设为dotted时，它会指定一个 dotted 边框。以下示例展示了它的默认行为。

示例

<!DOCTYPE html>
<html>
<head>
    <title>Default appearance of a dotted border</title>
    <style>
        div{
            width:200px;
            height:50px;
            padding:2px;
            border: 3px dotted darkslategray;
        }
    </style>
</head>
<body>
<div>
    Div element with a dotted border
</div>
</html>

但是，我们可以通过使用适用于水平和垂直边框的CSS属性来增加虚线边框上点之间的间距。

使用background-size和background-image属性

background-size属性 指定了背景图像的尺寸以适应可用空间，图像可以保持其原始尺寸，拉伸或者限制。有五个选项：auto、length、百分比、cover和contain。以下是语法：

background-size: auto|length|percentage|cover|contain;

其中，

Auto 将背景图像调整为其原始大小。这是默认设置。
Length 指定背景图像的高度和宽度。如果只指定一个值，则第二个值被设置为”自动”。不允许使用负值。
percentage 指定背景图像的高度和宽度的百分比。在这种情况下，负值也是无效的。
Cover 尽可能地放大图像，而不会拉伸它。如果图像的比例与元素的比例不同，它将在垂直或水平方向被裁剪，以确保没有空白。
Contain 调整背景图像的大小，使其更可见。

background-image 属性 指定了一个或多个元素的背景图像。可以使用一个或多个图像。默认情况下，背景图像在垂直和水平方向重复并放置在元素的左上角。元素的背景是其总大小，包括内边距和边框（不包括外边距）。如果图像不可用，则必须指定背景颜色。以下是语法 –

background-image: url|none;

此属性的url()值允许我们包含任何图像的文件路径。它将显示元素的背景。对于背景，我们可以使用多个图像或渐变和图像的组合。

示例

在这个例子中，我们将看到如何在虚线边框的点之间添加间距。我们可以通过使用CSS的background-size和background-image属性来改变大小和比例来实现这一点。结果就是我们可以拥有多个具有不同背景的虚线边框。

我们使用class属性来设计带有background-image、background-position、background-size和background-repeat属性的<div>元素。该例子适用于水平和垂直边框。

<!DOCTYPE html>
<html>
    <head>
        <title>How to Increase the Space Between the Dots of Dotted Borders?</title>
        <style>
            div {
                padding: 10px 50px;
            }
            h2 {
                color: mediumvioletred;
            }
            .dotted {
                border-top: 4px #000 dotted;
            }
            .dotted-gradient {
                background-image: linear-gradient(to right, #000 30%, rgba(255, 255, 255, 0) 10%);
                background-position: top;
                background-size: 8px 2px;
                background-repeat: repeat-x;
            }
            .dotted-spaced {
                background-image: linear-gradient(to right, #000 10%, rgba(255, 255, 255, 0) 0%);
                background-position: top;
                background-size: 9px 2px;
                background-repeat: repeat-x;
            }
            .left {
                float: left;
                padding: 40px 10px;
                background-color: bisque;
            }
            .left.dotted {
                border-left: 2px #000 dotted;
                border-top: none;
            }
            .left.dotted-gradient {
                background-image: linear-gradient(to bottom, #000 40%, rgba(255, 255, 255, 0) 10%);
                background-position: left;
                background-size: 2px 8px;
                background-repeat: repeat-y;
            }
            .left.dotted-spaced {
                background-image: linear-gradient(to bottom, #000 10%, rgba(255, 255, 255, 0) 0%);
                background-position: left;
                background-size: 3px 8px;
                background-repeat: repeat-y;
            }
        </style>
    </head>
    <body>
        <h2>Increasing space between dots of dotted borders.</h2>
        <div>no border</div>
        <div class="dotted">simple dotted border</div>
        <div class="dotted-gradient">
          dotted border with gradient</div>
        <div class="dotted-spaced">
          spaced out dotted border</div>
        <br>
        <div class="left">no border</div>
        <div class="dotted left">simple dotted border</div>
        <div class="dotted-gradient left">
          dotted border with gradient</div>
        <div class="dotted-spaced left">
          spaced out dotted border</div>
    </body>
</html>