教育行業(yè)A股IPO第一股（股票代碼 003032）

全國(guó)咨詢/投訴熱線：400-618-4000

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

更新時(shí)間:2020年11月11日17時(shí)32分 來源:傳智播客 瀏覽次數(shù):

邊框?qū)傩?/strong>

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

表5-1CSS邊框?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邊的公用樣式。了解了邊框樣式的相關(guān)屬性，接下來通過一個(gè)案例來演示其用法和效果。新建HTML頁面，并在頁面中添加標(biāo)題和段落文本，然后通過邊框樣式屬性控制標(biāo)題和段落的邊框效果，如例5-1所示。

example01.html

<!DOCTYPE doctype html>
<html>
    <head>
        <meta charset="utf-8">
            <title>
                設(shè)置邊框樣式
            </title>
            <style type="text/css">
                h2{ border-style:double;}             /*4條邊框相同——雙實(shí)線*/
.one{
   border-top-style:dotted;         /*上邊框——點(diǎn)線*/
   border-bottom-style:dotted;      /*下邊框——點(diǎn)線*/
   border-left-style:solid;         /*左邊框——單實(shí)線*/
   border-right-style:solid;        /*右邊框——單實(shí)線*/
/*上面4行代碼等價(jià)于：border-style:dotted solid;*/
}
.two{
border-style:solid dotted dashed; /*上實(shí)線、左右點(diǎn)線、下虛線*/ 
}
</style>
</meta>
</head>
<body>
        <h2>邊框樣式—雙實(shí)線</h2>
        <p class="one">邊框樣式—上下為點(diǎn)線左右為單實(shí)線</p>
        <p class="two">邊框樣式—上邊框單實(shí)線、左右點(diǎn)線、下邊框虛線</p>
    </body>
</html>

在例5-1中，使用邊框樣式border-style屬性，設(shè)置標(biāo)題和段落文本的邊框樣式。其中標(biāo)題設(shè)置了一個(gè)邊框?qū)傩灾?，類名?ldquo;one”的文本用單邊框?qū)傩栽O(shè)置樣式，類名為“two”的文本用綜合邊框?qū)傩栽O(shè)置樣式。運(yùn)行例5-1，效果如圖5-3所示。

圖5-3谷歌瀏覽器中的邊框效果

需要注意的是，由于兼容性的問題，在不同的瀏覽器中點(diǎn)線dotted和虛線dashed的顯示樣式可能會(huì)略有差異。圖5-4所示為例5-1在火狐瀏覽器中的預(yù)覽效果，其中虛線(dashed)顯示效果要比谷歌瀏覽器稀疏。

不同瀏覽器中的邊框樣式

邊框?qū)挾?/strong>

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ū)挾萚右邊框?qū)挾认逻吙驅(qū)挾茸筮吙驅(qū)挾萞;

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

了解了邊框?qū)挾葘傩?，接下來通過一個(gè)案例來演示其用法。新建HTML頁面，并在頁面中添加段落文本，然后通過邊框?qū)挾葘傩詫?duì)段落進(jìn)行控制，如例5-2所示。

example02.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>設(shè)置邊框?qū)挾?lt;/title>
<style type="text/css">
p{
    border-width:1px;          /*綜合設(shè)置4邊寬度*/
    border-top-width:3px;      /*設(shè)置上邊寬度覆蓋*/
    /*上面2行代碼等價(jià)于：border-width:3px 1px 1px; */
}
</style>
</head>
<body>
<p>邊框?qū)挾?mdash;上3px，下左右1px。邊框樣式—單實(shí)線。</p>
</body>
</html>

在例5-2中，先綜合設(shè)置四邊的邊框?qū)挾?，然后單?dú)設(shè)置上邊框?qū)挾冗M(jìn)行覆蓋，使上邊框的寬度不同。

運(yùn)行例5-2，效果如圖5-5所示。

設(shè)置邊框?qū)挾? src=

圖5-5僅設(shè)置邊框?qū)挾?/p>

在圖5-5中，段落文本并沒有像預(yù)期的一樣添加邊框效果。這是因?yàn)樵谠O(shè)置邊框?qū)挾葧r(shí)，必須同時(shí)設(shè)置邊框樣式，如果未設(shè)置樣式或設(shè)置為none，則不論寬度設(shè)置為多少都無效。

在例5-2的CSS代碼中，為標(biāo)簽添加邊框樣式，代碼如下。

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

保存HTML文件，刷新網(wǎng)頁，效果如圖5-6所示。

邊框?qū)挾? src=

圖5-6同時(shí)設(shè)置邊框?qū)挾群蜆邮?/p>

在圖5-6中，段落文本添加了預(yù)期的邊框效果。

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%”

多學(xué)一招：巧用邊框透明色(transparent)

CSS2.1將元素背景延伸到了邊框，同時(shí)增加了transparent透明色。如果需要將已有的邊框設(shè)置為暫時(shí)不可見，可使用“border-color:transparent;”，這時(shí)如同沒有邊框，看到的是背景色，需要邊框可見時(shí)再設(shè)置相應(yīng)的顏色，這樣可以保證元素的區(qū)域不發(fā)生變化。這種方式與取消邊框樣式不同，取消邊框樣式時(shí)，雖然邊框也不可見，但是這時(shí)邊框的寬度為0，即元素的區(qū)域發(fā)生了變化。

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ū)挾?/h3>

　　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ū)挾?[右邊框?qū)挾?下邊框?qū)挾?左邊框?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ū)挾?樣式 顏色;

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

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

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

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ù)合屬性，以免樣式不被兼容。


猜你喜歡：

如何獲取jQuery？通過代碼演示jQuery的使用

編程中的Javascript能用來做什么?Javascript的發(fā)展歷史

0 分享到：
和我們?cè)诰€交談！