資料結構
網路
關係型資料庫管理系統
作業系統
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+ 次檢視
