在CSS3中，我们可以使用border-colors属性来实现多色边框。注意，这里是border-colors，而不是border-color。

语法：

border-top-colors:颜色值;
border-right-colors:颜色值;
border-bottom-colors:颜色值;
border-left-colors:颜色值;

说明：

对于多色边框，我们需要注意以下3点。

  • （1）border-colors属性兼容性很差，并没有得到各大主流浏览器支持，暂时只有Firefox浏览器支持。
  • （2）不能使用-moz-border-bolors属性为4条边同时设定颜色，必须像上面语法那样分别为4条边设定颜色。
  • （3）如果边框宽度（即border-width）为n个像素，则该边框可以使用n种颜色，即每像素显示一种颜色。

举例：多色边框

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            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></div>
</body>
</html>

浏览器预览效果如下图所示。

分析：

在这个例子中，我们定义border-wdith为7px，因此可以为边框定义7种颜色。除了多色边框，我们还可以使用border-colors实现渐变边框。

举例：渐变边框

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            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></div>
</body>
</html>

浏览器预览效果如下图所示。

分析：

由于border-colors兼容性太差，只有Firefox浏览器支持，因此在实际开发中用得不多，这里我们简单了解一下即可。