css3中边框的4种样式

border是CSS的一个属性，用它可以给能确定范围的HTML标签画边框，它可以定义边框线的类型、宽度和颜色，最终可以制作一些特殊效果

css3的边框有4种样式：

1.border-color（边框的颜色）

一般设置边框都有3个属性-宽度、线的样式、颜色，如果宽度设置了很多PX，那么就可以给边框设置很多颜色，让边框显示出渐变的效果，不过设置边框不同颜色时只能通过border-bottom-colors，border-top-colors，border-left-colors，border-right-colors-上边框 下边框 左边框 右边框这样逐个设置。

如：border: 8px solid #000;

-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc

这个样式只能被火狐3.0以上识别，别的浏览器显示不出来

2.border-image（边框图片）

这个样式可以给边框添加图片，让边框的样子更花哨，不过要设置边框的宽度，不然看不出来

如：border-image:url(img/border.png) 30 30 round（ round表示平铺）（平铺之后的边框是图片大小不变，重复复制铺满整个边框）

border-image:url(img/border.png) 30 30 stretch;（stretch表示拉伸）（拉伸之后的边框是图片中部被强行拉伸变形铺满整个边框，上下左右四个角属于盲区，这个区域的图片没有任何变化）

属性还有个repeat--重复，感觉和round没什么区别额

3.border-radius（边框弧度）

可以把边框四个直角变的圆滑，甚至可以变成圆形

如：border-radius: 11px;

4.box-shadow（阴影）

可以给有固定宽高的html标签加阴影

如：box-shadow:5px 2px 6px #000;（数值的含义：阴影水平偏移，阴影垂直偏移，模糊，颜色）（水平偏移和垂直偏移都可以设置负值，阴影的位置就可以在图形的上方

我想，对于一个程序员来说，尤其是前端程序员，CSS并不陌生,但是CSS3是什么呢？其实CSS3和CSS...就多了个"3"而已..(废话= =||).

CSS3早已经不是新鲜事物，但是学习它却用处不少.

在学习之前，我们需要知道，CSS3虽然很有趣，但是却并没有被当前浏览器完全支持.所以如果我们要在网站中使用CSS3时，最好有相应的不兼容处理.

当然，现在我们只考虑主流的5大浏览器，他们分别是IE, FireFox, Chrome, Safari, Opera.

CSS3的浏览器支持状况：

• √ Firefox (3.05+…部分支持)
• √ Google Chrome (1.0.154+…部分支持)
• √ Google Chrome (2.0.156+…较好支持)
• × Internet Explorer (IE7, IE8 不支持)
• √ Opera (9.6+…很少支持)
• √ Safari (3.2.1+ windows…较好支持)

我们根据需要使用，IE7，8是不支持的- -这个有点郁闷.

既然CSS3不完全支持？我们为什么要写呢？我想,当你了解到他的好处时，你也会叫好的.

从此就会感叹"原来实现圆角是这么简单","哇，还有这效果?"，咳咳，打住，继续.有什么效果后面会知道的.

 

今天主要学习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。。。基本都是最新版本.

编程环境:VS2010旗舰版  ASP.NET

我们之前要给一个div加上边框时，我们会这样写

 

    


    
class='border_test'>常用的边框样式

 

border-color

既然我们已经可以设置边框颜色了，为什么还要border-color呢？因为CSS3的border有所不同.

使用border-color如果你设置了边框宽度是X。那么你就可以在这个这个边框上使用X种颜色,每种颜色显示1px的宽度.

(ps:如果你边框宽度是10px,而你只设置了5种颜色，那么最后一种颜色将会填充剩下的宽度)

具体写法看下面代码

    


    
class='border_test'>CSS3 Border-color样式

但是结果和我们想的并不一样.

 

 我们只看到了4个边框分别对应4种颜色.分别是 上 右 下 左。

当然，如果我们只输入3种颜色,中间的颜色就对应 左和右,具体的自己试一下吧.

那么之前我们说的每像素一种颜色的效果呢？别着急."那么你就可以在这一边框上使用X种颜色".因为border-color是针对整个4条边框的，所以不是针对某条边框的.

如果我们需要做到上面的效果，可以针对某一条边框设置。他们分别是:

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

所以我们需要改一下代码

    


    
class='border_test'>CSS3 Border-color样式

运行后

效果出来了有木有?虽然看不太清楚，不过确实每个像素一个颜色了，这样如果我们要做渐变颜色的话就方便了很多，只需要调整颜色就好了

有人会问了，为什么前面加了个-moz-，这个可以通过点击传送门了解.

看完《传送门》后，我们在对代码做写修改.

.border_test
        {
            border:5px solid red; 
            -moz-border-top-colors:Blue Yellow Red Black Green;
            -ms-border-top-colors:Blue Yellow Red Black Green;
            -wekit-border-top-colors:Blue Yellow Red Black Green;
            -o-border-top-colors:Blue Yellow Red Black Green;
            border-top-colors:Blue Yellow Red Black Green;
        }

但是却发现，只有火狐上出现了效果，也就是说,border-边框-colors这个属性只有在火狐上可用，其他的不兼容.可惜了..

Border-image

 

border-image主要是用图片来填充边框.

border-image的分解属性分别为
border-image-source 指定border的背景图的url
border-image-slice 设置图片如何切割的属性，非定位！
border-image-width 定义border-image的显示区域的
border-image-repea

下面我们来逐个解析.
border-image-source
这个是指定border的背景图的url, 例
border-image-source ：url(../images/border.gif);
这里可以设置为none,也就是无背景图

border-image-slice
设置图片如何切割的属性，（重点理解）他的值是四个数值, 没单位(实际上是已经固定是px了, 注意, 这个值不能是负值或大于图片的尺寸), 例如: border-image-slice:1 2 3 4; 你想得没错, 同样对应的是”上右下左”,将这几个数值, 把背景图片, 切割开来,具体一会再说

border-image-width
定义border-image的width, 这个是定义border-image的显示区域的(这个只是在w3c上描述的, 但在实际测试过, 设置这个属性没有作用, 但是border-width能生效)

border-image-repeat;
repeat有三个值选择
[ stretch | repeat | round ]：拉伸 | 重复 | 平铺 (其中stretch是默认值。)

好了，我们回头来看slice,也就是切割.= =说实话，不知道该怎么讲,还是上图吧.

嗯- -在这里我要借别人的2张图，因为我用“画图”花了好久，实在看不下去。。。最讨厌画画了.

 

                                       

左上图是一个这样的样式.border-image-slice:10 15 20 25; 他会将图片分割为右上边这样的9宫格图片.

left,top,right,bottom分别是你设置的距离，这一部分会被抽取出来作为边框.

top-left,  top-right, bottom-left, bottom-right同样会被抽取出来，与left,top,right,bottom不同的是，他们不会受repeat,stretch,round的影响.

而left,top,right,bottom,则有可能因为拉伸什么的而改变宽度和高度.不知道这样说会不会容易理解点?

下面看代码

    


    
class='border_test'>CSS3 Border-image样式

效果如下

用的材料图是

同样可惜的是，我这里只有FireFox和Safari出了效果，当然这也不能排序Chrome不能，因为听说有几个版本的可以。哈哈