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