border 邊框

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

1. 官方解釋

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

2. 解釋

任何一個 h5 標簽通過添加一個 border 屬性，可以給它設置邊框的寬度、展示出來的樣子（實線、虛線、圓點等）和顏色。

3. 語法

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

屬性值：

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

相關屬性：

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

4. 兼容性

5. 實例

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

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

1. 為 demo 增加邊框

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

效果圖

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

2. 只給 demo 的頂部增加一個邊框：

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

效果圖

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

3. 修改 button 默認的邊框樣式

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

.btn{       
        border-width: px;
    }

效果圖

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

4. 個性化 demo 每個邊框的顏色。

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

效果圖

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

6. 經驗分享

我們有時候在元素內可能會使用margin-top這樣的屬性來讓子元素和父元素的頂部有一個間隔，但是經常不天遂人愿，發現它并沒有達到我們想要的效果，反而變成了父元素距離上一個元素增加了一個距離。如果我們在父元素設置一個看不見的border就可以解決這個問題。

7. 小結

1. border-width 屬性會有影響設定元素的尺寸。

2. 在 table 中使用 border，要使用border-xx這樣的屬性，為的是去掉一邊避免重疊。

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

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

4. 
   

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

上面這樣的設置 div 在頁面中實際站位是 104px，如果不注意很容易造成頁面錯亂。這是因為我們大部分情況下盒模型使用的是 W3C 標準的’Box-sizing: content-Box;’，它在頁面中實際寬度 = width+border( 該公式僅針對上面例子）。

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

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