邊框 · 前端

邊框的聲明有三個屬性設置，樣式表如下： |**屬性**|**值**|**說明**|**CSS 版本**| | --- | --- | --- | --- | | border-width | 長度值 | 設置邊框的寬度（$length、%），可選 | 1 | | border-style | 樣式名稱 | 設置邊框的樣式，必選 | 1 | | border-color | 顏色值 | 設置邊框的顏色，可選 | 1 | border-style | **值** | **說明** | | --- | --- | | none | 沒有邊框 | | dashed | 破折線邊框 | | dotted | 圓點線邊框 | | double | 雙線邊框 | | groove | 槽線邊框 | | inset | 使元素內容具有內嵌效果的邊框 | | outset | 使元素內容具有外凸效果的邊框 | | ridge | 脊線邊框 | | solid | 實線邊框 | 如果想對四條邊中某一條邊單獨進行設置，可以使用如下樣式表： |**屬性**|**說明**|**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 | 如果四條變都一致，那么沒必要分寫成三句樣式，直接通過簡寫即可： |**屬性**|**值**|**說明**|**CSS 版本**| | --- | --- | --- | --- | | border | | 設置四條邊的邊框 | 1 | | border-top | 只設置上邊框 | | border-middle | 只設置下邊框 | | border-left | 只設置左邊框 | | border-right | 只設置右邊框 | **圓角邊框** 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 | # 邊框圖片效果border-image ~~~ border-image ~~~