如何增加点线边框之间的间距
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>