# 第 17 章 CSS 邊框與背景[上] 學習要點： 1.聲明邊框 2.邊框樣式 3.圓角邊框 主講教師：李炎恢 本章主要探討 HTML5?中 CSS?邊框和背景，通過邊框和背景的樣式設置，給元素增加更豐富的外觀。 **一．聲明邊框** 邊框的聲明有三個屬性設置，樣式表如下： | **屬性** | **值** | **說明** | **CSS 版本** | | --- | --- | | border-width | 長度值 | 設置邊框的寬度，可選 | 1 | | border-style | 樣式名稱 | 設置邊框的樣式，必選 | 1 | | border-color | 顏色值 | 設置邊框的顏色，可選 | 1 | 這三個屬性值，只有 border-style?是必須聲明，才可以出現邊框。而其他兩個屬性會出現默認值。 //最簡單的邊框，邊框長度默認?3px，邊框顏色為黑色? ``` div { border-style: solid; } ``` //配置完整的邊框? ``` div { border-style: solid; border-width: 2px; border-color: red; } ``` 如果元素長和高均為 200px?時，四個邊框均為 2?時，元素的長高總尺寸均為 202px。 **二．邊框樣式** 邊框的樣式主要有三種，分別是邊框長度取值、邊框的顏色和邊框的線條類型。顏色是通用的顏色代碼，和所有其他顏色取值一下。而長度和線條類型，邊框有自己獨到的部分。 邊框寬度取值表如下： | **值** | **說明** | | --- | --- | | 長度值 | CSS 長度值：比如?px、em 等 | | 百分數 | 直接設置百分數：1、2、3?等 | | thin | 使用長度名稱的預設寬度。這三個值的具體意義由瀏覽器來定義，從小到大依次增大。 | | medium | | thick | 一般來說，邊框為了更加精準，還要計算元素盒子的總尺寸，使用長度值的比較多。而定義邊框線條的樣式如下樣式表： | **值** | **說明** | | --- | --- | | none | 沒有邊框 | | dashed | 破折線邊框 | | dotted | 圓點線邊框 | | double | 雙線邊框 | | groove | 槽線邊框 | | inset | 使元素內容具有內嵌效果的邊框 | | outset | 使元素內容具有外凸效果的邊框 | | ridge | 脊線邊框 | | solid | 實線邊框 | //solid 實線使用頻率最高 ``` div { border-style: solid; border-width: 10px; border-color: red; } ``` 如果想對四條邊中某一條邊單獨進行設置，可以使用如下樣式表： | **屬性** | **說明** | **CSS 版本** | | --- | --- | | border-top-width | 定義頂端 | 1 | | border-top-style | | border-top-color | | border-middle-width | 定義底部 | 1 | | border-middle-style | | border-middle-color | | border-left-width | 定義左側 | 1 | | border-left-style | | border-left-color | | border-right-width | 定義右邊 | 1 | | border-right-style | | border-right-color | //只設置頂端? ``` div { border-top-style: solid; border-top-width: 10px; border-top-color: red; } ``` 如果四條變都一致，那么沒必要分寫成三句樣式，直接通過簡寫即可： | **屬性** | **值** | **說明** | **CSS 版本** | | --- | --- | | border | <寬度> <樣式> <顏色> | 設置四條邊的邊框 | 1 | | border-top | 只設置上邊框 | | border-middle | 只設置下邊框 | | border-left | 只設置左邊框 | | border-right | 只設置右邊框 | //簡寫形式四條邊設置 ``` div { border: 10px solid red; } ``` **三．圓角邊框** CSS3 提供了一個非常實用的圓角邊框的設置。使用?border-radius 屬性，就可以達到這種效果，樣式表如下： | **屬性** | **值** | **說明** | **CSS 版本** | | --- | --- | | border-radius | 長度值或百分數 | 四條邊角 | 3 | | border-top-left-radius | 長度值或百分數 | 左上邊角 | 3 | | border-top-right-radius | 長度值或百分數 | 右上邊角 | 3 | | border-middle-left-radius | 長度值或百分數 | 左下邊角 | 3 | | border-middle-right-radius | 長度值或百分數 | 右下邊角 | 3 | //設置圓角矩形? ``` div { border: 10px solid red; border-radius: 10px; } ``` //四條邊分別設置? ``` div { border: 10px solid red; border-radius: 10px 20px 30px 40px; } ```