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;

-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;

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;

4. border-image

这个类似于background，只不过这个用于边框的。语法为：

   
    
    1 
    border-image:
   

由于网站上没图片，也懒得弄效果图了。用过background的都应该知道怎么用。