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

全國咨詢/投訴熱線:400-618-4000

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

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

邊框屬性

為了分割頁面中不同的盒子,常常需要給元素設置邊框效果。在CSS中邊框屬性包括邊框樣式屬性(border-style)、邊框寬度屬性(border-width)、邊框顏色屬性(border-color)、單側邊框的屬性、邊框的綜合屬性,如表5-1所示。

表5-1CSS邊框屬性
1605086449332_21.png
1605086459693_22.png

  僅通過表1的簡單解釋,初學者可能很難理解邊框屬性的應用技巧,下面我們將詳細講解邊框屬性。

1.邊框樣式

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

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

  • solid:邊框為單實線
  • dashed:邊框為虛線
  • dotted:邊框為點線
  • double:邊框為雙實線

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

border-style:double;

在設置邊框樣式時,可以對盒子的單邊進行設置,具體格式如下。

border-top-style:上邊框樣式;
border-right-style:右邊框樣式;
border-bottom-style:下邊框樣式;
border-left-style:左邊框樣式;

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

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

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

設置3個屬性值時,為上、左右、下;設置2個屬性值時,為上下和左右,設置1個屬性值,為4邊的公用樣式。了解了邊框樣式的相關屬性,接下來通過一個案例來演示其用法和效果。新建HTML頁面,并在頁面中添加標題和段落文本,然后通過邊框樣式屬性控制標題和段落的邊框效果,如例5-1所示。

example01.html

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

在例5-1中,使用邊框樣式border-style屬性,設置標題和段落文本的邊框樣式。其中標題設置了一個邊框屬性值,類名為“one”的文本用單邊框屬性設置樣式,類名為“two”的文本用綜合邊框屬性設置樣式。運行例5-1,效果如圖5-3所示。

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

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

不同瀏覽器中的邊框樣式

邊框寬度

border-width屬性用于設置邊框的寬度,其常用取值單位為像素px。同邊框樣式一樣,邊框寬度也可以針對四條邊分別設置,或綜合設置四條邊的寬度,具體如下。

border-top-width:上邊框寬度;
border-right-width:右邊框寬度;
border-bottom-width:下邊框寬度;
border-left-width:左邊框寬度;
border-width:上邊框寬度[右邊框寬度下邊框寬度左邊框寬度];

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

了解了邊框寬度屬性,接下來通過一個案例來演示其用法。新建HTML頁面,并在頁面中添加段落文本,然后通過邊框寬度屬性對段落進行控制,如例5-2所示。

example02.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>設置邊框寬度</title>
<style type="text/css">
p{
    border-width:1px;          /*綜合設置4邊寬度*/
    border-top-width:3px;      /*設置上邊寬度覆蓋*/
    /*上面2行代碼等價于:border-width:3px 1px 1px; */
}
</style>
</head>
<body>
<p>邊框寬度—上3px,下左右1px。邊框樣式—單實線。</p>
</body>
</html>

在例5-2中,先綜合設置四邊的邊框寬度,然后單獨設置上邊框寬度進行覆蓋,使上邊框的寬度不同。

運行例5-2,效果如圖5-5所示。

設置邊框寬度

圖5-5僅設置邊框寬度

在圖5-5中,段落文本并沒有像預期的一樣添加邊框效果。這是因為在設置邊框寬度時,必須同時設置邊框樣式,如果未設置樣式或設置為none,則不論寬度設置為多少都無效。

在例5-2的CSS代碼中,為標簽添加邊框樣式,代碼如下。

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

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

邊框寬度

圖5-6同時設置邊框寬度和樣式

在圖5-6中,段落文本添加了預期的邊框效果。

3.設置邊框顏色

border-color屬性用于設置邊框的顏色,其取值可為預定義的顏色英文單詞(如red、blue)、十六進制顏色值#RRGGBB(如#FF0000或#F00)或RGB模式rgb(r,g,b)(如rgb(0,255,0)括號里是顏色色值或百分比),實際工作中最常用的是十六進制顏色值。邊框的默認顏色為元素本身的文本顏色,對于沒有文本的元素,例如只包含圖像的表格,其默認邊框顏色為父元素的文本顏色。與邊框樣式和寬度相同,邊框顏色的單邊與綜合設置方式如下。

border-top-color:上邊框顏色;
border-right-color:右邊框顏色;
border-bottom-color:下邊框顏色;
border-left-color:左邊框顏色;
border-color:上邊框顏色[右邊框顏色下邊框顏色左邊框顏色];

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

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

p {
    border - style: solid; /*綜合設置邊框樣式*/
    border - color: # CCC # FF0000; /*設置邊框顏色:兩個值為上下、左右*/
}

再如設置二級標題的邊框樣式為實線,且下邊框為紅色,其余邊框采用默認文本的顏色,代碼如下。

h2 {
    border - style: solid; /*綜合設置邊框樣式*/
    border - bottom - color: red; /*單獨設置下邊框顏色*/
}

注意:

1、設置邊框顏色時同樣必須設置邊框樣式,如果未設置樣式或設置為none,則其他的邊框屬性無效。

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

多學一招:巧用邊框透明色(transparent)

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

1. 邊框樣式

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

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

●solid:邊框為單實線

● dashed:邊框為虛線

●dotted:邊框為點線

●double:邊框為雙實線

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

border-style:double;

  在設置邊框樣式時,可以對盒子的單邊進行設置,具體格式如下。

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

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

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

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

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

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

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

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

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

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

2. 邊框寬度

  border-width屬性用于設置邊框的寬度,其常用取值單位為像素px。同邊框樣式一樣,邊框寬度也可以針對四條邊分別設置,或綜合設置四條邊的寬度,具體如下。

border-top-width:上邊框寬度;

border-right-width:右邊框寬度;

border-bottom-width:下邊框寬度;

border-left-width:左邊框寬度;

border- width:上邊框寬度 [右邊框寬度 下邊框寬度 左邊框寬度];

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

  3. 設置邊框顏色

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

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

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

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

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

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

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

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

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

p{

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

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

}

  再如設置二級標題的邊框樣式為實線,且下邊框為紅色,其余邊框采用默認文本的顏色,代碼如下。

h2{

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

    border-bottom-color:red;    /*單獨設置下邊框顏色*/

}

  注意:

  1、設置邊框顏色時同樣必須設置邊框樣式,如果未設置樣式或設置為none,則其他的邊框屬性無效。

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

  4.綜合設置邊框

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

border-top:上邊框寬度 樣式 顏色;

border-right:右邊框寬度 樣式 顏色;

border-bottom:下邊框寬度 樣式 顏色;

border-left:左邊框寬度 樣式 顏色;

border:四邊寬度 樣式 顏色;

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

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

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

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

p{

    border-top-style:solid;

    border-top-width:2px;

    border-top-color:#CCC;

}

  當四條邊的邊框樣式都相同時,可以使用border屬性進行綜合設置。例如將二級標題的邊框設置為雙實線、紅色、3像素寬,代碼如下。

h2{border:3px double red;}

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


猜你喜歡:

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

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

0 分享到:
和我們在線交談!