10 CSS邊框?qū)傩?/h5>

1. border-style（邊框風(fēng)格）

定義邊框的風(fēng)格，值可以有：

/*
none：沒(méi)有邊框，當(dāng)border的值為none的時(shí)候，系統(tǒng)將會(huì)忽略[border-color]
hidden：隱藏邊框，低版本瀏覽器不支持。
dotted：點(diǎn)狀邊框。
dashed：虛線邊框。
solid：實(shí)線邊框。
double：雙實(shí)線邊框，兩條單線與其間隔的和等于border-width值。
*/

border-style的值可以縮寫(xiě)的：

/*
只有一個(gè)值的時(shí)候表示同時(shí)控制上下左右的邊框風(fēng)格。
只有兩個(gè)值的時(shí)候表示分別控制上下、左右的邊框風(fēng)格。
有三個(gè)值的時(shí)候表示分別控制上、左右、下的邊框風(fēng)格。
有四個(gè)只的時(shí)候表示分別控制上、右、下、左的邊框風(fēng)格。
*/

border-style還可以單獨(dú)指定不同方向：

/*
border-top-style		設(shè)置上邊的邊框風(fēng)格
border-bottom-style	     設(shè)置下邊的邊框風(fēng)格
border-left-style		設(shè)置左邊的邊框風(fēng)格
border-right-style		設(shè)置右邊的邊框風(fēng)格
*/

2. border-width（邊框?qū)挾龋?/li>

使用border-width可以定義邊框的厚度，值可以是medium，thin，thick和指定數(shù)值的寬度。 同時(shí)，border-width也可以進(jìn)行縮寫(xiě)：

/*
只有一個(gè)值的時(shí)候表示同時(shí)控制上下左右的邊框?qū)挾取?只有兩個(gè)值的時(shí)候表示分別控制上下、左右的邊框?qū)挾取?有三個(gè)值的時(shí)候表示分別控制上、左右、下的邊框?qū)挾取?有四個(gè)只的時(shí)候表示分別控制上、右、下、左的邊框?qū)挾取?*/

border-width也可以單獨(dú)指定不同方向：

/*
border-top-width		設(shè)置上邊的邊框?qū)挾?border-bottom-width	    設(shè)置下邊的邊框?qū)挾?border-left-width		設(shè)置左邊的邊框?qū)挾?border-right-width		設(shè)置右邊的邊框?qū)挾?*/

3. border-color（邊框顏色）

定義邊框的顏色，值表示的方式可以是十六進(jìn)制，RGB十進(jìn)制和單詞表示法。
同上，border-color的縮寫(xiě)：

/*
只有一個(gè)值的時(shí)候表示同時(shí)控制上下左右的邊框顏色。
只有兩個(gè)值的時(shí)候表示分別控制上下、左右的邊框顏色。
有三個(gè)值的時(shí)候表示分別控制上、左右、下的邊框顏色。
有四個(gè)只的時(shí)候表示分別控制上、右、下、左的邊框顏色。
*/

border-color也可以單獨(dú)指定不同方向：

/*
border-top-color		設(shè)置上邊的邊框顏色
border-bottom-color	設(shè)置下邊的邊框顏色
border-left-color		設(shè)置左邊的邊框顏色
border-right-color		設(shè)置右邊的邊框顏色
*/

4. 邊框樣式縮寫(xiě)

還可以把邊框風(fēng)格，邊框?qū)挾?，邊框顏色進(jìn)行組合在一起，進(jìn)行縮寫(xiě)：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-664249.html

語(yǔ)法：// border: 邊框?qū)挾?邊框樣式 邊框顏色;
注意，border的縮寫(xiě)值可以不按照順序來(lái)進(jìn)行書(shū)寫(xiě)。這樣的縮寫(xiě)可以同時(shí)控制4個(gè)方向的邊框樣式。

到了這里，關(guān)于10 CSS邊框?qū)傩缘奈恼戮徒榻B完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！