在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浏览器支持,因此在实际开发中用得不多,这里我们简单了解一下即可。