border 邊框

有時(shí)候在頁面中需要做一些分割來區(qū)分不同的區(qū)域，這個(gè)屬性不但可以用來給元素添加一個(gè)邊框，也可以作為不同區(qū)域的分割線。

1. 官方解釋

CSS 的 border 屬性是一個(gè)用于設(shè)置各種單獨(dú)的邊界屬性的簡寫屬性。 border 可以用于設(shè)置一個(gè)或多個(gè)以下屬性的值： border-width、border-style、border-color。

2. 慕課解釋

任何一個(gè) h5 標(biāo)簽通過添加一個(gè) border 屬性，可以給它設(shè)置邊框的寬度、展示出來的樣子（實(shí)線、虛線、圓點(diǎn)等）和顏色。

3. 語法

border: [border-width ||border-style ||border-color |inherit] ;

屬性值：

border-width、border-style、border-color它們的用法遵循 css 的：左上、 右上 、右下 、左下 的原則。最多可以添加 4 個(gè)參數(shù)。

相關(guān)屬性：

boder可以直接設(shè)置元素的寬度、邊框樣式、顏色，不需要再去單獨(dú)通過border-width、border-style、border-color去設(shè)置。

4. 兼容性

5. 實(shí)例

接下來我們通過一個(gè) div 元素，來說明 border 的使用方法。

 <div class="demo"></div>

1. 為 demo 增加邊框

.demo{
        width:100px;
        height: 100px;
        border:1px solid #ddd;
}

效果圖

解釋：通過border 為div四周增加一個(gè)寬度為 1px、填充樣式為solid(實(shí)線)、顏色為#ddd的邊框。

2. 只給 demo 的頂部增加一個(gè)邊框：

.demo{
    width:100px;
    height: 100px;
    border-top:1px solid #000;
    background: #f2f2f2;
}

效果圖

解釋：通過border-top可以只給 div 的頂部增加邊框而不會(huì)影響其它部分的樣式。

3. 修改 button 默認(rèn)的邊框樣式

<button class="btn"></button>

.btn{       
        border-width: 4px;
    }

效果圖

解釋：左邊是默認(rèn)的 button 效果, 右邊圖片是我們修改后的效果。

4. 個(gè)性化 demo 每個(gè)邊框的顏色。

.demo{
    width:100px;
    height: 100px;
    border:2px solid;        
    border-top-color:red;
    border-right-color:green;
    border-bottom-color:black;
    border-left-color:orange;    
}

效果圖

這里千萬不能寫成 border-right:green;

6. 經(jīng)驗(yàn)分享

我們有時(shí)候在元素內(nèi)可能會(huì)使用margin-top這樣的屬性來讓子元素和父元素的頂部有一個(gè)間隔，但是經(jīng)常不天遂人愿，發(fā)現(xiàn)它并沒有達(dá)到我們想要的效果，反而變成了父元素距離上一個(gè)元素增加了一個(gè)距離。如果我們?cè)诟冈卦O(shè)置一個(gè)看不見的border就可以解決這個(gè)問題。

7. 小結(jié)

1. border-width 屬性會(huì)有影響設(shè)定元素的尺寸。
2. 在 table 中使用 border，要使用border-xx這樣的屬性，為的是去掉一邊避免重疊。

td{
    border:1px solid #ccc;
    border-bottom:none;
}

3. border-color 如果不設(shè)置那么它會(huì)使用元素中字體的顏色。

div{
widht:100px;
height:100px
border-width:2px;
}

上面這樣的設(shè)置 div 在頁面中實(shí)際站位是 104px，如果不注意很容易造成頁面錯(cuò)亂。這是因?yàn)槲覀兇蟛糠智闆r下盒模型使用的是 W3C 標(biāo)準(zhǔn)的’box-sizing: content-box;’，它在頁面中實(shí)際寬度 = width+border( 該公式僅針對(duì)上面例子）。

5. 如果我們需要給 button 設(shè)置一個(gè)顏色，那么它就會(huì)失去瀏覽器自帶的交互效果。

6. border-top 的使用和 border 的使用方法是一樣的，如果要個(gè)性化一個(gè)邊的顏色，可以這樣設(shè)置： border-top-color:red;也可以這樣設(shè)置： border-top:1px solid red;。