Day17:設定元素的邊框

2024 iThome 鐵人賽

DAY 17

佛心分享-IT 人自學之術

HTML&CSS網頁設計學習心得系列第 17 篇

16th鐵人賽

gogococo

2024-10-01 22:57:23

48 瀏覽

分享至

在 HTML 和 CSS 中，可以使用 CSS 的 border 屬性來設定元素的邊框。
一些基本範例。

HTML 部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素邊框示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="solid-border">實線邊框</div>
    <div class="dashed-border">虛線邊框</div>
    <div class="dotted-border">點線邊框</div>
    <div class="double-border">雙線邊框</div>
    <div class="rounded-border">圓角邊框</div>

</body>
</html>

CSS 部分：


body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    padding: 20px;
}

.solid-border {
    border: 2px solid black;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.dashed-border {
    border: 2px dashed blue; 
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.dotted-border {
    border: 2px dotted green; 
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.double-border {
    border: 4px double red; 
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.rounded-border {
    border: 2px solid purple; 
    border-radius: 15px;
    padding: 20px;
    text-align: center;
}

說明：
邊框寬度 (border-width)：指定邊框的寬度，例如 2px。
邊框樣式 (border-style)：
solid：實線邊框。
dashed：虛線邊框。
dotted：點線邊框。
double：雙線邊框。
邊框顏色 (border-color)：指定邊框的顏色，例如 black、blue、green 等。
圓角邊框 (border-radius)：用於設置邊框的圓角程度，例如 15px 會讓邊框的角變圓。
這些樣式展示了不同類型的邊框，並且可以根據需要進行調整。邊框樣式可以用來增強網頁元素的可視化效果。