資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用 CSS 樣式化 hr 元素？
為了在 HTML 網頁上分割內容，可以使用 <hr> 元素。<hr> 標籤只包含開始標籤，不需要結束標籤。使用 <hr> 元素插入水平線。要樣式化 <hr> 元素，邊框屬性起著重要作用。可以使用邊框速記屬性，或者如果要樣式化水平線的特定區域，則可以使用 border-top、border-bottom、border-left 等屬性。讓我們看看如何使用 HTML 和 CSS 樣式化 <hr> 元素。
設定 hr 元素
在我們的示例中，我們在這裡設定了 <hr> 元素。設定了五個 <hr> 元素，以便使用類分別對其進行樣式設定。
<hr class="solid"> <hr class="dashed"> <hr class="double"> <hr class="dotted"> <hr class="round">
實線
在這裡，我們將建立一個實線，並使用 border-top 屬性對其進行樣式設定。
.solid {
border-top: 5px solid rgb(16, 2, 141);
}
虛線
在這裡，我們將建立一個虛線，並使用 border-top 屬性對其進行樣式設定。
.dashed {
border-top: 5px dashed rgb(190, 13, 146);
}
雙線
在這裡，我們將建立一個雙線，並使用 border-top 屬性對其進行樣式設定。
.double {
border-top: 5px double rgb(22, 145, 11);
}
點線
在這裡，我們將建立一個點線，並使用 border 屬性對其進行樣式設定。
.dotted {
border: 5px dotted rgb(200, 255, 0);
}
圓角線
在這裡，我們將建立一個點線，並使用 border-radius 屬性對其進行樣式設定。
.round {
border: 5px solid rgb(35, 196, 142);
border-radius: 5px;
}
示例
要使用 CSS 樣式化 hr 元素，程式碼如下所示：
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
hr{
margin-bottom: 20px;
}
.solid {
border-top: 5px solid rgb(16, 2, 141);
}
.dashed {
border-top: 5px dashed rgb(190, 13, 146);
}
.double {
border-top: 5px double rgb(22, 145, 11);
}
.dotted {
border: 5px dotted rgb(200, 255, 0);
}
.round {
border: 5px solid rgb(35, 196, 142);
border-radius: 5px;
}
</style>
</head>
<body>
<h1 style="text-align: center;">HR styling example</h1>
<hr class="solid">
<hr class="dashed">
<hr class="double">
<hr class="dotted">
<hr class="round">
</body>
</html>
更新於：2023年12月21日
757 次瀏覽
廣告