分割頁面中不同的盒子，常常需要給元素設(shè)置邊框效果。在CSS中邊框?qū)傩园ㄟ吙驑邮綄傩?border-style)、邊框?qū)挾葘傩?border-width)、邊框顏色屬性(border-color)、單側(cè)邊框的屬性、邊框的綜合屬性，如表1所示。

表1 CSS邊框?qū)傩?/p>

僅通過表1的簡單解釋，初學(xué)者可能很難理解邊框?qū)傩缘膽?yīng)用技巧，下面我們將詳細(xì)講解邊框?qū)傩浴?/p>

1. 邊框樣式

邊框樣式用于定義頁面中邊框的風(fēng)格，在CSS屬性中，border-style屬性用于設(shè)置邊框樣式，其常用屬性值如下。

●none：沒有邊框即忽略所有邊框的寬度(默認(rèn)值)

●solid：邊框為單實線

● dashed：邊框為虛線

●dotted：邊框為點線

●double：邊框為雙實線

例如，想要定義邊框顯示為雙實線，可以書寫以下代碼樣式：border-style:double;

在設(shè)置邊框樣式時，可以對盒子的單邊進(jìn)行設(shè)置，具體格式如下。border-top-style:上邊框樣式;

border-right-style:右邊框樣式;

border-bottom-style:下邊框樣式;

border-left-style:左邊框樣式;

同時，為了避免代碼過于冗余，也可以綜合設(shè)置四條邊的樣式，具體格式如下。border-style:上邊框樣式?右邊框樣式?下邊框樣式?左邊框樣式;

border-style:上邊框樣式?左右邊框樣式?下邊框樣式;

border-style:上下邊框樣式?左右邊框樣式;

border-style:上下左右邊框樣式;

觀察上面的代碼格式會發(fā)現(xiàn)，在綜合設(shè)置邊框樣式時，其屬性值可以設(shè)置1~4個。當(dāng)設(shè)置4個屬性值時，邊框樣式的寫法會按照上右下左的順時針順序排列。當(dāng)省略某個屬性值時，邊框樣式會采用值復(fù)制的原則，將省略的屬性值默認(rèn)為某一邊的樣式。設(shè)置3個屬性值時，為上、左右、下;設(shè)置2個屬性值時，為上下和左右，設(shè)置1個屬性值，為4邊的公用樣式。

2. 邊框?qū)挾?/p>

border-width屬性用于設(shè)置邊框的寬度，其常用取值單位為像素px。同邊框樣式一樣，邊框?qū)挾纫部梢葬槍λ臈l邊分別設(shè)置，或綜合設(shè)置四條邊的寬度，具體如下。border-top-width：上邊框?qū)挾?

border-right-width：右邊框?qū)挾?

border-bottom-width：下邊框?qū)挾?

border-left-width：左邊框?qū)挾?

border-?width：上邊框?qū)挾?[右邊框?qū)挾?下邊框?qū)挾?左邊框?qū)挾萞;

綜合設(shè)置四邊寬度必須按上右下左的順時針順序采用值復(fù)制，即一個值為四邊，兩個值為上下/左右，三個值為上/左右/下。

3. 設(shè)置邊框顏色

border-color屬性用于設(shè)置邊框的顏色，其取值可為預(yù)定義的顏色英文單詞(如red、blue)、十六進(jìn)制顏色值#RRGGBB(如#FF0000或#F00)或RGB模式rgb(r,g,b)(如rgb(0,255,0)括號里是顏色色值或百分比)，實際工作中最常用的是十六進(jìn)制顏色值。

邊框的默認(rèn)顏色為元素本身的文本顏色，對于沒有文本的元素，例如只包含圖像的表格，其默認(rèn)邊框顏色為父元素的文本顏色。與邊框樣式和寬度相同，邊框顏色的單邊與綜合設(shè)置方式如下。border-top-color:上邊框顏色;

border-right-color:右邊框顏色;

border-bottom-color:下邊框顏色;

border-left-color:左邊框顏色;

border-color:上邊框顏色?[右邊框顏色?下邊框顏色?左邊框顏色];

綜合設(shè)置四邊顏色必須按順時針順序采用值復(fù)制原則，即一個值為四邊，兩個值為上下/左右，三個值為上/左右/下。

例如設(shè)置段落的邊框樣式為實線，上下邊灰色，左右邊紅色，代碼如下。p{

border-style:solid;???????/*綜合設(shè)置邊框樣式*/

border-color:#CCC?#FF0000;???/*設(shè)置邊框顏色：兩個值為上下、左右*/

}

再如設(shè)置二級標(biāo)題的邊框樣式為實線，且下邊框為紅色，其余邊框采用默認(rèn)文本的顏色，代碼如下。h2{

border-style:solid;???????/*綜合設(shè)置邊框樣式*/

border-bottom-color:red;????/*單獨設(shè)置下邊框顏色*/

}

注意：

1、設(shè)置邊框顏色時同樣必須設(shè)置邊框樣式，如果未設(shè)置樣式或設(shè)置為none，則其他的邊框?qū)傩詿o效。

2、使用rgb模式設(shè)置顏色時，如果括號里面的數(shù)值為百分比，必須把“0”也加上百分號，寫作“0%”。

4.綜合設(shè)置邊框

使用border-style、border-width、border-color雖然可以實現(xiàn)豐富的邊框效果，但是這種方式書寫的代碼繁瑣，且不便于閱讀。其實CSS提供了更簡單的邊框設(shè)置方式，具體設(shè)置方式如下。border-top:上邊框?qū)挾?樣式?顏色;

border-right:右邊框?qū)挾?樣式?顏色;

border-bottom:下邊框?qū)挾?樣式?顏色;

border-left:左邊框?qū)挾?樣式?顏色;

border:四邊寬度?樣式?顏色;

上面的設(shè)置方式中，邊框的寬度、樣式、顏色順序任意，不分先后，可以只指定需要設(shè)置的屬性，省略的部分將取默認(rèn)值(樣式不能省略)。

當(dāng)每一側(cè)的邊框樣式都不同，或者只需單獨定義某一側(cè)的邊框樣式時，可以使用單側(cè)邊框的綜合設(shè)置樣式屬性border-top、border-bottom、border-left或border-right。例如單獨定義段落的上邊框，代碼如下。p{?border-top:2px?solid?#CCC;}???/*定義上邊框，各個值順序任意*/

該樣式將段落的上邊框設(shè)置為2像素、單實線、灰色，其他各邊的邊框按默認(rèn)值不可見，這段代碼等價于：p{

border-top-style:solid;

border-top-width:2px;

border-top-color:#CCC;

}

當(dāng)四條邊的邊框樣式都相同時，可以使用border屬性進(jìn)行綜合設(shè)置。例如將二級標(biāo)題的邊框設(shè)置為雙實線、紅色、3像素寬，代碼如下。h2{border:3px?double?red;}

像border、border-top等這樣，能夠一個屬性定義元素的多種樣式，在CSS中稱之為復(fù)合屬性。常用的復(fù)合屬性有font、border、margin、padding和background等。實際工作中常使用復(fù)合屬性，它可以簡化代碼，提高頁面的運行速度，但是如果只設(shè)置一個屬性值，最好不要應(yīng)用復(fù)合屬性，以免樣式不被兼容。

猜你喜歡：

總結(jié)

以上是生活随笔為你收集整理的html盒模型中border的写法,【前端】盒子模型的边框样式属性和应用技巧讲解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。