好程序员web前端分享CSS3 边框

好程序员web前端分享CSS3 边框，经过 CSS3，您可以建立圆角边框，向矩形添加阴影，使用图片来绘制边框 - 而且不需使用设计软件，好比 PhotoShop。
在本章中，您将学到如下边框属性：
border-radius
box-shadow
border-image

浏览器支持

Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。
Firefox、Chrome 以及 Safari 支持全部新的边框属性。
注释：对于 border-image，Safari 5 以及更老的版本须要前缀 -webkit-。
Opera 支持 border-radius 和 box-shadow 属性，可是对于 border-image 须要前缀 -o-。

CSS3 圆角边框
在 CSS2 中添加圆角矩形须要技巧。咱们必须为每一个圆角使用不一样的图片。
在 CSS3 中，建立圆角是很是容易的。
在 CSS3 中，border-radius 属性用于建立圆角：

实例
向 div 元素添加圆角：

1. div
2. {
3. border:2px solid;
4. border-radius:25px;
5. -moz-border-radius:25px; /* Old Firefox */
6. }

CSS3 边框阴影
在 CSS3 中，box-shadow 用于向方框添加阴影： 

实例
向 div 元素添加方框阴影：

1. div
2. {
3. box-shadow: 10px 10px 5px #888888;
4. }

CSS3 边框图片
经过 CSS3 的 border-image 属性，您能够使用图片来建立边框：

用于建立上面的边框的原始图片：

实例
使用图片建立围绕 div 元素的边框：

1. <font color="#000000" size="3">div
2. {
3. border-image:url(border.png) 30 30 round;
4. -moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
5. -webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
6. -o-border-image:url(border.png) 30 30 round; /* Opera */
7. }</font>

新的边框属性

属性	描述	CSS
border-image	设置全部 border-image-* 属性的简写属性	3
border-radius	设置全部四个 border-*-radius 属性的简写属性	3
box-shadow	向方框添加一个或多个阴影	3