border-color 屬性用來設置元素中所有邊框的顏色,或者單獨為某個邊框設置顏色,其語法格式如下:
border-color: border-top-color border-right-color border-bottom-color border-left-color;
border-color 屬性的可選值如下:
同 border-style 屬性相同,border-color 屬性同樣支持多種不同的用法:
如果提供全部的四個參數,則會按照上、右、下、左的順序分別設置邊框四個邊的顏色;
如果提供三個參數,那么第一個參數會作用在上邊框,第二個參數會作用在左、右兩個邊框上,第三個參數會作用在下邊框上;
如果提供兩個參數,那么第一個參數會作用在上、下兩個邊框上,第二個參數會作用在左、右兩個邊框上;
如果只提供一個參數,這個參數將同時作用在四個邊框上。
除了可以使用 border-color 屬性設置元素的邊框顏色外,您還可以使用下面的屬性分別設置元素上、下、左、右四個邊框的顏色:
border-bottom-color:設置下邊框的顏色;
border-top-color:設置上邊框的顏色;
border-left-color:設置左邊框的顏色;
border-right-color:設置右邊框的顏色。
【示例】使用 border-color 設置邊框的顏色:
運行結果如下圖所示:
border 屬性是上面介紹的 border-width、border-style、border-color 三種屬性的簡寫,使用 border 屬性可以同時定義上述三個屬性,語法格式如下:
border: border-width border-style border-color;
其中 border-width 用來設置邊框的寬度;border-style 用來設置邊框的樣式;border-color 用來設置邊框的顏色。
【示例】使用 border 屬性為元素設置邊框:
運行結果如下圖所示:
提示:border 屬性的三個參數(border-width、border-style、border-color)并不需要遵守固定的順序,將它們的順序打亂也是可以的。另外,也可以省略其中的某個參數,例如border: soild red;,省略的參數將被設置為該參數的默認值。
除了可以使用 border 屬性統一設置邊框的寬度、樣式、顏色外,您還可以使用下面的屬性分別設置元素上、下、左、右四個邊框的寬度、樣式、顏色:
border-bottom:統一設置下邊框的寬度、樣式、顏色;
border-top:統一設置上邊框的寬度、樣式、顏色;
border-left:統一設置左邊框的寬度、樣式、顏色;
border-right:統一設置右邊框的寬度、樣式、顏色。
通過組合本節中介紹這些屬性,可以實現一些意想不到的效果,例如我們可以通過邊框來繪制三角形,示例代碼如下:
運行結果如下圖所示: