首頁技術(shù)文章正文

【前端】盒子模型的邊框樣式屬性和應(yīng)用技巧講解

更新時(shí)間:2020-11-11 來源:黑馬程序員 瀏覽量:

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

表1 CSS邊框?qū)傩?br/>1605086449332_21.png
1605086459693_22.png

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

  1. 邊框樣式

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

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


●solid:邊框?yàn)閱螌?shí)線


● dashed:邊框?yàn)樘摼€


●dotted:邊框?yàn)辄c(diǎn)線


●double:邊框?yàn)殡p實(shí)線

  例如,想要定義邊框顯示為雙實(shí)線,可以書寫以下代碼樣式:  

border-style:double;


  在設(shè)置邊框樣式時(shí),可以對(duì)盒子的單邊進(jìn)行設(shè)置,具體格式如下。

border-top-style:上邊框樣式;

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

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

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

  同時(shí),為了避免代碼過于冗余,也可以綜合設(shè)置四條邊的樣式,具體格式如下。

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

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

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

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

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

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

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

border-top-width:上邊框?qū)挾?

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

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

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

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

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

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

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

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

border-top-color:上邊框顏色;

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

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

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

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

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

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

p{

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

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

}

  再如設(shè)置二級(jí)標(biāo)題的邊框樣式為實(shí)線,且下邊框?yàn)榧t色,其余邊框采用默認(rèn)文本的顏色,代碼如下。

h2{

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

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

}

  注意:

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

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

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

  使用border-style、border-width、border-color雖然可以實(shí)現(xiàn)豐富的邊框效果,但是這種方式書寫的代碼繁瑣,且不便于閱讀。其實(shí)CSS提供了更簡(jiǎn)單的邊框設(shè)置方式,具體設(shè)置方式如下。

border-top:上邊框?qū)挾?nbsp;樣式 顏色;

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

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

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

border:四邊寬度 樣式 顏色;

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

  當(dāng)每一側(cè)的邊框樣式都不同,或者只需單獨(dú)定義某一側(cè)的邊框樣式時(shí),可以使用單側(cè)邊框的綜合設(shè)置樣式屬性border-top、border-bottom、border-left或border-right。例如單獨(dú)定義段落的上邊框,代碼如下。

p{ border-top:2px solid #CCC;}   /*定義上邊框,各個(gè)值順序任意*/

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

p{

    border-top-style:solid;

    border-top-width:2px;

    border-top-color:#CCC;

}

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

h2{border:3px double red;}

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


猜你喜歡:

前端培訓(xùn)課程

瀏覽器介紹,Web開發(fā)過程中使用哪個(gè)瀏覽器更好?

從async/await面試題看宏觀任務(wù)和微觀任務(wù)

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!