CSS3中边框相关的特性
1.圆角 border-radius
CSS2中的圆角只能通过比较特殊的方法或是图片实现，在CSS3中终于可以直接使用了。指令为：
1 border-radius: width;
width表示四个圆角的水平半径。目前这还只是个草案，并非实际标准，所以直接用border-radius浏览器还是不能识别的，对于这种实现各浏览器都会加上各自的标记，Firefox为-moz-border-radius，webkit内核的为-webkit-border-radius而IE8和Opera貌似还不支持这个属性。
有时候指定某一个角为圆角也很有用，所以又有了以下四个类型（恩，这回moz和webkit命名有点不一样）：
1 /* moz */
2 -moz-border-radius-topleft: /* 左上角 */
3 -moz-border-radius-bottomleft: /* 左下角 */
4 -moz-border-radius-topright: /* 右上角 */
5 -moz-border-radius-bottomright: /* 右下角 */
6
7 /* webkit */
8 -webkit-border-top-left-radius: /* 左上角 */
9 -webkit-border-bottom-left-radius: /* 左下角 */
10 -webkit-border-top-right-radius: /* 右上角 */
11 -webkit-border-bottom-right-radius: /* 右下角 */
示例：四个圆角。如果看到了圆角，说明你的浏览器支持这一特性。
border:5px solid gray;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
padding:10px;
border:5px solid gray;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
padding:10px;
示例：底部两个圆角。如果看到了，说明你的浏览器支持这一特性。
border:5px solid gray;
-moz-border-radius-bottomleft:25px;
-moz-border-radius-bottomright:40px;
-webkit-border-bottom-left-radius:25px;
-webkit-border-bottom-right-radius:40px;
padding:10px;
border:5px solid gray;
-moz-border-radius-bottomleft:25px;
-moz-border-radius-bottomright:40px;
-webkit-border-bottom-left-radius:25px;
-webkit-border-bottom-right-radius:40px;
padding:10px;
示例：textarea或input的圆角
在firefox中若要指定textarea或input的圆角，
不能将border-style高为none。
border:5px solid gray;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
padding:10px;
2.边框渐变：border-colors
这个可以用来指定边框的渐变颜色，当你指定的边框的值为5px时，那么你在这个border-color中指定5种颜色的话，每一种颜色就显示为1px的宽度，若只指定了4种颜色，则最后指定的颜色将填充剩下的宽度。当然，相对应的也有相对于四条边的语法。
1 border-colors: color1 color2...
2 border-top-colors:
3 border-right-color:
4 border-bottom-colors:
5 border-left-colors:
示例：左边和顶部边框渐变效果。
目前貌似只有Firefox3.5以上版本才实现此特性。
border: 10px solid #000;
-moz-border-left-colors:#000 #111 #222 #333 #444 #555 #666 #777 #888 #999;
-moz-border-top-colors:#fff #eee #999 #888 #777 #666 #333 #222;
padding:10px;
目前貌似只有Firefox3.5以上版本才实现此特性。
border: 10px solid #000;
-moz-border-left-colors:#000 #111 #222 #333 #444 #555 #666 #777 #888 #999;
-moz-border-top-colors:#fff #eee #999 #888 #777 #666 #333 #222;
padding:10px;
3.阴影：box-shadow
语法为：
1 box-shadow：length length length color
值分别为：阴影水平偏移量、阴影垂直偏移量、阴影模糊值、阴影颜色。
示例：阴影效果：
-webkit-box-shadow:5px 2px 6px #000;
-moz-box-shadow:5px 2px 6px #000;
padding:10px;
-webkit-box-shadow:5px 2px 6px #000;
-moz-box-shadow:5px 2px 6px #000;
padding:10px;
4. border-image
这个类似于background，只不过这个用于边框的。语法为：
1 border-image:
由于网站上没图片，也懒得弄效果图了。用过background的都应该知道怎么用。
