文档介绍：CSS3学****之边框(Border)
我想,对于一个程序员来说,尤其是前端程序员,CSS并不陌生,但是CSS3是什么呢?其实CSS3和CSS...就多了个"3"而已..(废话= =||).
CSS3早已经不是新鲜事物,但是学****它却用处不少.
在学****之前,我们需要知道,CSS3虽然很有趣,,最好有相应的不兼容处理.
当然,现在我们只考虑主流的5大浏览器,他们分别是IE, FireFox, Chrome, Safari, Opera.
CSS3的浏览器支持状况:
√ Firefox (+…部分支持)
√ Google Chrome (+…部分支持)
√ Google Chrome (+…较好支持)
× Explorer (IE7, IE8 不支持)
√ Opera (+…很少支持)
√ Safari (+ windows…较好支持)
我们根据需要使用,IE7,8是不支持的- -这个有点郁闷.
既然CSS3不完全支持?我们为什么要写呢?我想,当你了解到他的好处时,你也会叫好的.
从此就会感叹"原来实现圆角是这么简单","哇,还有这效果?",咳咳,打住,.
 
今天主要学****CSS3中的边框(Border). border:1px solid red了..那么CSS3中会给我们带来什么惊喜呢?

 Border-color(设置边框颜色)
 Border-image(通过图片设置为边框)
 Border-radius(边框的半径)
 box-shadow(阴影效果)
而我使用的浏览器版本为:IE8,  ,  Chrome , Safari , Opera 。。。基本都是最新版本.
编程环境:VS2010旗舰版 
我们之前要给一个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 bla