使用 HTML 和 CSS 的解决方案
在这个片段中，我们将演示如何在点之间添加空格。
为了克服这个困难，使用 background-size 属性调整大小，使用 background-image 属性调整比例。
因此，我们可以使用多个背景拥有多个虚线边框。
让我们看看这个例子，它适用于水平和垂直边界。
增加虚线边框的点之间的空间的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
padding: 10px 50px;
}
.dotted {
border-top: 1px #000 dotted;
}
.dotted-gradient {
background-image: linear-gradient(to right, #000 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, #000 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: #f3fc38;
}
.left.dotted {
border-left: 1px #000 dotted;
border-top: none;
}
.left.dotted-gradient {
background-image: linear-gradient(to bottom, #000 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, #000 10%, rgba(255, 255, 255, 0) 0%);
background-position: left;
background-size: 1px 10px;
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div>no border</div>
<div class='dotted'>dotted border</div>
<div class='dotted-gradient'>dotted border with gradient</div>
<div class='dotted-spaced'>dotted spaced border</div>
<div class='left'>no border</div>
<div class='dotted left'>dotted border</div>
<div class='dotted-gradient left'>dotted border with gradient</div>
<div class='dotted-spaced left'>dotted spaced border</div>
</body>
</html>
在这个例子中，我们使用了带有 class 属性的 <div> 元素，然后使用 background-image、background-position、background-size 和 background-repeat 属性来设置这些class的样式。
日期：2020-06-02 22:15:09 来源：oir作者：oir