CSS3中的边框(Border). 这对我们来说并不陌生.多少次写下 border:1px solid red了..那么CSS3中会给我们带来什么惊喜呢？
在CSS3中.边框多了4种新特性
1.Border-color(设置边框颜色)
2.Border-image(通过图片设置为边框)
3.Border-radius(边框的半径)
4.box-shadow(阴影效果)
而我使用的浏览器版本为:IE8, FireFox10.0.9, Chrome 22.0.1229.94， Safari 5.1.7， Opera 12.50。。。基本都是最新版本.
我们之前要给一个div加上边框时，我们会这样写
<html>
<head>
<style type="text/css">
.border_test
{
border:5px solid red;
}
</style>
</head>
<body>
<div class='border_test'>常用的边框样式</div>
</body>
</html>border-color
既然我们已经可以设置边框颜色了，为什么还要border-color呢？因为CSS3的border有所不同.
使用border-color如果你设置了边框宽度是X。那么你就可以在这个这个边框上使用X种颜色,每种颜色显示1px的宽度.(ps:如果你边框宽度是10px,而你只设置了5种颜色，那么最后一种颜色将会填充剩下的宽度)
具体写法看下面代码
<html>
<head>
<style type="text/css">
.border_test
{
border:5px solid red;
border-color:red blue green black;
}
</style>
</head>
<body>
<div class='border_test'>CSS3 Border-color样式</div>
</body>
</html>但是结果和我们想的并不一样.
我们只看到了4个边框分别对应4种颜色.分别是 上 右 下 左。
当然，如果我们只输入3种颜色,中间的颜色就对应 左和右,具体的自己试一下吧.
那么之前我们说的每像素一种颜色的效果呢？别着急."那么你就可以在这一边框上使用X种颜色".因为border-color是针对整个4条边框的，所以不是针对某条边框的.
如果我们需要做到上面的效果，可以针对某一条边框设置。他们分别是:
border-top-color
border-right-color
border-bottom-color
border-left-color
所以我们需要改一下代码
<html>
<head>
<style type="text/css">
.border_test
{
border:5px solid red;
-moz-border-top-colors:Blue Yellow Red Black Green;
-moz-border-bottom-colors:Blue Yellow Red Black Green;
-moz-border-right-colors:Blue Yellow Red Black Green;
