数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法律如何增加点线边框的点间距？
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 时，它指定一个点线边框。其默认行为可以在下面的示例中看到。
示例
<!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、percentages、cover 和 contain。以下是语法
background-size: auto|length|percentage|cover|contain;
其中，
Auto 将背景图像调整为其原始大小。这是默认设置。
Length 指定背景图像的高度和宽度。如果只指定一个值，则第二个值设置为“auto”。不允许使用负值。
Percentage 以百分比的形式指定背景图像的高度和宽度。在这种情况下，负值也是无效的。
Cover 尽可能放大图像，而不会拉伸它。如果图像的比例与元素的比例不同，则会垂直或水平裁剪，以便不留任何空间。
Contain 调整背景图像的大小，使其更易于查看。
background-image 属性为元素指定一个或多个背景图像。可以使用一个或多个图像。默认情况下，背景图像在垂直和水平方向上重复，并放置在元素的左上角。元素的背景是其总大小，包括填充和边框（不包括边距）。如果图像不可用，我们必须指定背景颜色。以下是语法 -
background-image: url|none;
此属性的 url() 值允许我们包含任何图像的文件路径。它将显示元素的背景。对于背景，我们可以使用多个图像或渐变和图像的组合。
示例
在本例中，我们将看到如何添加点线边框的点间距。我们可以通过使用 CSS background-size 和 background-image 属性来更改大小和比例来实现这一点。因此，我们可以拥有具有不同背景的多个点线边框。
我们使用 <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>
5K+ 次查看
