CSS常用元素/屬性

border元素

border 是 CSS 中用來設置元素邊框的屬性。它能夠為 HTML 元素添加邊框，邊框可以控制樣式、顏色和寬度。這個屬性是個綜合屬性，實際上它是三個不同屬性的縮寫：border-width、border-style 和 border-color。

主要屬性

border-width：定義邊框的寬度。
- 值：可以使用像素（px）、點（pt）、百分比（%）等單位，也可以用 thin、medium 和 thick 這些關鍵字來表示。
- 範例：border-width: 2px;
border-style：定義邊框的樣式。
- 值：常見的樣式包括 solid（實線）、dashed（虛線）、dotted（點線）、double（雙線）、groove（凹槽）、ridge（凸脊）、inset（內嵌）、outset（外凸）、和 none（無邊框）。
- 範例：border-style: solid;
border-color：定義邊框的顏色。
- 值：可以使用顏色名稱、十六進制顏色（例如 #ff0000）、RGB（例如 rgb(255, 0, 0)）或 HSL（例如 hsl(0, 100%, 50%)）來設置顏色。
- 範例：border-color: red;

簡單使用

border 屬性可以用來同時設置邊框的寬度、樣式和顏色。以下是幾個範例：

設置所有邊框：
```
div {
  border: 2px solid black;
}
```
- 解釋：這個例子為 div 元素添加了 2 像素寬的實線黑色邊框。

設置不同邊框樣式：

div {
  border-top: 3px dashed blue;
  border-right: 4px dotted green;
  border-bottom: 2px solid red;
  border-left: 1px double purple;
}

解釋：這個例子為 div 元素的每個邊設置了不同的邊框樣式和顏色。

使用 `border` 的例子

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border 範例</title>
    <style>
        .example {
            border: 5px solid #0000FF; /* 5 像素寬的實線藍色邊框 */
            padding: 10px; /* 內邊距 */
            margin: 20px; /* 外邊距 */
        }
    </style>
</head>
<body>
    <div class="example">
        這是一個有邊框的區塊
    </div>
</body>
</html>

注意事項

邊框縮寫：border 屬性是邊框樣式的縮寫，設置它時會同時影響邊框的寬度、樣式和顏色。如果你只想設置其中的一部分，可以使用 border-width、border-style 和 border-color 這些單獨的屬性。
邊框模型：邊框會占用元素的空間，增加元素的總寬度和高度，這要注意與其他 CSS 屬性的搭配使用。

希望這樣的解釋能幫助你理解 border 屬性的作用和使用方法！

BACKGROUND

背景圖片相關的 CSS 屬性

屬性名稱	說明	範例
`background-image`	設置背景圖片。	`background-image: url("../img/logo.png");`
`background-repeat`	控制背景圖片的重複方式。	`background-repeat: no-repeat;`<br>`background-repeat: repeat-x;`<br>`background-repeat: repeat-y;`
`background-attachment`	控制背景圖片是否固定，還是隨著視窗滾動。	`background-attachment: fixed;`<br>`background-attachment: scroll;`
`background-position`	設置背景圖片的位置。	`background-position: center;`<br>`background-position: 10px 20px;`<br>`background-position: left top;`