CSS3 border-colors

admin發表於2018-07-20
CSSS3

特別說明：border-colors屬性已經被廢棄，雖然當前有部分瀏覽器依然支援。

border-color是CSS2最常用屬性之一，可以設定邊框的顏色。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:100px;
  height:100px;
  border-width:10px;
  border-style:solid;
  border-color:green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

以上程式碼可以設定div四個邊框的顏色，當然也可以給每一個邊框設定不同的顏色。

程式碼修改如下：

[CSS] 純文字檢視 複製程式碼
div{
  width:100px;
  height:100px;
  border-width:10px;
  border-style:solid;
  border-top-color:green;
  border-right-color:red;
  border-bottom-color:black;
  border-left-color:blue;
}

當然也可以合併起來分別設定四個邊框的顏色。

程式碼例項如下：

[CSS] 純文字檢視 複製程式碼
div{
  width:100px;
  height:100px;
  border-width:10px;
  border-style:solid;
  border-color:green red black blue;
}

程式碼實現了同樣的效果，遵循原則與margn或者padding類似。

四個顏色值分別作用域上右下左四個方位邊框。

以上介紹的都是CSS2的規則，發展到CSS3，出現了border-color屬性的加強版本。

語法結構：

[CSS] 純文字檢視 複製程式碼
border-top-colors: <color> <color> <color>*; /*頂邊邊框*/
border-right-colors:<color> <color> <color>*; /*右邊邊框*/
border-bottom-colors: <color> <color> <color>*; /*底邊邊框*/
border-left-colors: <color> <color> <color>*; /*左邊邊框*/

四個屬性可以設定四個方位邊框的顏色，每一個屬性都可以一次設定多個顏色值，每一個顏色值可以給邊框的一個畫素設定顏色，假設邊框是5px，但是隻設定了3個顏色值，那麼這三個顏色值分別作用域邊框的由內到外三份1px邊框，剩餘的畫素的邊框顏色將會以最後一個顏色填充。

特別說明：上面屬性不能夠合併成如下形式：

[CSS] 純文字檢視 複製程式碼
border-colors: <color> <color> <color>*;

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:100px;
  height:100px;
  border-width:10px;
  border-style:solid;
  -moz-border-top-colors:red blue green black; /*頂邊邊框*/
  -moz-border-right-colors:blue green black; /*右邊邊框*/
  -moz-border-bottom-colors:blue green black; /*底邊邊框*/
  -moz-border-left-colors:black green blue; /*左邊邊框*/ 
}
</style>
</head>
<body>
<div></div>
</body>
</html>

相關文章