第 17 章 CSS 邊框與背景[上]

學習要點：

1.宣告邊框

2.邊框樣式

3.圓角邊框

主講教師：李炎恢

本章主要探討 HTML5 中 CSS 邊框和背景，通過邊框和背景的樣式設定，給元素增加更豐富的外觀。

一．宣告邊框

邊框的宣告有三個屬性設定，樣式表如下：

這三個屬性值，只有 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

一般來說，邊框為了更加精準，還要計算元素盒子的總尺寸，使用長度值的比較多。而定義邊框線條的樣式如下樣式表：

//solid 實線使用頻率最高

div {
    border-style: solid;
    border-width: 10px;
    border-color: red;
}

如果想對四條邊中某一條邊單獨進行設定，可以使用如下樣式表：

//只設定頂端

div {
    border-top-style: solid;
    border-top-width: 10px;
    border-top-color: red;
}

如果四條變都一致，那麼沒必要分寫成三句樣式，直接通過簡寫即可：

//簡寫形式四條邊設定

div {
    border: 10px solid red;
}

三．圓角邊框

CSS3 提供了一個非常實用的圓角邊框的設定。使用 border-radius 屬性，就可以達到這種效果，樣式表如下：

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;
}

相關文章