在CSS2中，我們可以用border-color設置邊框的顏色。但是如果我們想要實現下圖那種多色邊框和漸變邊框，該怎麼做呢？
在CSS3中，我們可以使用border-colors屬性來實現多色邊框。記住，是border-colors，不是border-color。
語法：
-moz-border-top-colors:顏色值; -moz-border-right-colors:顏色值; -moz-border-bottom-colors:顏色值; -moz-border-left-colors:顏色值;
說明：
對於CSSS3中的border-colors屬性，我們需要注意3點：
（1）border-colors屬性並沒有得到各大主流浏覽器支持，目前僅有目前僅有Mozilla Gecko引擎（火狐浏覽器）支持，因此需要加上浏覽器前綴“-moz-”；
（2）不能使用-moz-border-bolors屬性為4條邊同時設定顏色，必須像上面語法那樣分別為4條邊設定顏色；
（3）如果邊框寬度（border-width）為n像素，則該邊框可以使用n種顏色，每種顏色顯示1像素的寬度。
舉例：CSS3 border-colors實現多色邊框
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 border-colors屬性</title>
<style type="text/css">
#div1
{
width:200px;
height:100px;
border-width:7px;
border-style:solid;
-moz-border-top-colors:red orange yellow green cyan blue purple;
-moz-border-right-colors: red orange yellow green cyan blue purple;
-moz-border-bottom-colors: red orange yellow green cyan blue purple;
-moz-border-left-colors: red orange yellow green cyan blue purple;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
上述代碼定義了邊框寬度（border-width）為7px，因此我們可以使用border-colors屬性為邊框定義7種顏色值。border-colors屬性值為“值列表”形式，每個顏色值之間需要用空格隔開。
上面的在線測試必須在火狐浏覽器下才有效果。
舉例2：CSS3 border-colors屬性制作漸變邊框
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 border-colors屬性</title>
<style type="text/css">
#div1
{
width:200px;
height:100px;
border-width:8px;
border-style:solid;
-moz-border-top-colors:#D0EDFD #B8E4FD #9DD9FC #8DD4FC #71C9FC #4ABBFC #1DACFE #00A2FF;
-moz-border-right-colors:#D0EDFD #B8E4FD #9DD9FC #8DD4FC #71C9FC #4ABBFC #1DACFE #00A2FF;
-moz-border-bottom-colors:#D0EDFD #B8E4FD #9DD9FC #8DD4FC #71C9FC #4ABBFC #1DACFE #00A2FF;
-moz-border-left-colors:#D0EDFD #B8E4FD #9DD9FC #8DD4FC #71C9FC #4ABBFC #1DACFE #00A2FF;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
此處邊框寬度為8px，每條邊框使用border-colors定義8個漸變顏色值。有人疑惑，那8個漸變顏色值怎麼取出來的呢？很簡單，大家可以直接使用 學習網中的“在線調色板”按照下圖方向逐個取8個顏色值就有了：
由於border-colors屬性兼容性不太好，僅僅只有火狐浏覽器支持，因此使用不多。
如果要實現多色邊框可以使用圖片來實現，而漸變邊框的話，建議大家使用CSS3中的box-shadow屬性來實現。