CSS 中的邊框是圍繞著元素內容和內邊距的一條或多條線段,您可以自定義這些線段的樣式、寬度以及顏色。您可以通過下面幾個屬性分別定義邊框的樣式、寬度和顏色:
border-style:設置邊框的樣式,例如實線、虛線等;
border-width:設置邊框的寬度(厚度);
border-color:設置邊框的顏色;
border:上面三個邊框屬性的縮寫。
border-style 屬性用來設置元素中所有邊框的樣式,或者單獨為某個邊框設置樣式,其語法格式如下:
border-style: border-top-style border-right-style border-bottom-style border-left-style;
border-style 屬性的可選值如下:
border-style 屬性有多種不同的用法:
如果提供全部的四個參數,則會按照上、右、下、左的順序分別設置邊框四個邊的樣式;
如果提供三個參數,那么第一個參數會作用在上邊框,第二個參數會作用在左、右兩個邊框上,第三個參數會作用在下邊框上;
如果提供兩個參數,那么第一個參數會作用在上、下兩個邊框上,第二個參數會作用在左、右兩個邊框上;
如果只提供一個參數,這個參數將同時作用在四個邊框上。
除了可以使用 border-style 屬性設置元素的邊框樣式外,您還可以使用下面的屬性分別設置元素上、下、左、右四個邊框的樣式:
border-bottom-style:設置下邊框的樣式;
border-top-style:設置上邊框的樣式;
border-left-style:設置左邊框的樣式;
border-right-style:設置右邊框的樣式。
【示例】使用 border-style 屬性為元素設置邊框:
運行結果如下圖所示:
border-width 屬性用來設置元素中所有邊框的寬度,或者單獨為某個邊框設置寬度,其語法格式如下:
border-width: border-top-width border-right-width border-bottom-width border-left-width;
border-width 屬性的可選值如下:
thin、medium、thick 三個關鍵字并沒有固定的值,它們的值取決于瀏覽器,例如在 Chrome 瀏覽器中三個關鍵字的值分別為 1px、3px、5px。
同 border-style 屬性相同,border-width 屬性同樣支持多種不同的用法:
如果提供全部的四個參數,則會按照上、右、下、左的順序分別設置邊框四個邊的寬度;
如果提供三個參數,那么第一個參數會作用在上邊框,第二個參數會作用在左、右兩個邊框上,第三個參數會作用在下邊框上;
如果提供兩個參數,那么第一個參數會作用在上、下兩個邊框上,第二個參數會作用在左、右兩個邊框上;
如果只提供一個參數,這個參數將同時作用在四個邊框上。
除了可以使用 border-width 屬性設置元素的邊框寬度外,您還可以使用下面的屬性分別設置元素上、下、左、右四個邊框的寬度:
border-bottom-width:設置下邊框的寬度;
border-top-width:設置上邊框的寬度;
border-left-width:設置左邊框的寬度;
border-right-width:設置右邊框的寬度。
【示例】使用 border-width 設置邊框的寬度:
運行結果如下圖所示: