如何增加虚线边框的点间距?
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。它允许我们从以下边框样式中进行选择:无、实线、点线、虚线、双线、凹槽、脊线、插入、突出和隐藏。
当 border-style 的值设置为点线时，指定一个 点线 边框。其默认行为如下例所示。
示例
<!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 属性指定背景图像的尺寸。为了适应可用空间，图像可以保持其原始大小、拉伸或约束。有五个选项:自动、长度、百分比、覆盖和包含。语法如下
background-size: auto|length|percentage|cover|contain;
其中，
自动将背景图像调整为原始大小。这是默认设置。
长度指定背景图像的高度和宽度。如果仅指定一个值，则第二个值将设置为"auto"。不允许使用负值。
Percentage 以百分比形式指定背景图像的高度和宽度。在这种情况下，负值也无效。
Cover 会尽可能放大图像而不进行拉伸。如果图像的比例与元素的比例不同，则会垂直或水平裁剪图像，使其不留任何空间。
Contain 会调整背景图像的大小以使其更清晰可见。
background-image 属性 为元素指定一张或多张背景图像。可以使用一张或多张图像。默认情况下，背景图像会在垂直和水平方向上重复，并放置在元素的左上角。元素的背景是其总大小，包括内边距 (padding) 和边框 (border)(不包括外边距 (margin))。如果图片不可用，我们必须指定背景颜色。语法如下 –
background-image: url|none;
此属性的 url() 值允许我们包含任何图片的文件路径。它将显示元素的背景。对于背景，我们可以使用多张图片，或者渐变和图片的组合。
示例
在此示例中，我们将了解如何在虚线边框的点之间添加空间。我们可以通过使用 CSS background-size 和 background-image 属性来更改大小和比例来实现这一点。因此，我们可以拥有多个具有不同背景的虚线边框。
我们使用带有 class 属性的 <div> 元素，并使用 background-image、background-position、background-size 和 background-repeat 属性设置它们的样式。此示例适用于水平和垂直边框。
<!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>
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
