CSS3+HTML5实现圆角

CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。 

CSS3的border-radius属性在主流浏览器中的写法:

border-radius属性都遵循top-left（左上）、top-right（右上）、bottom-right（右下）、bottom-left（左下）的顺序，并且都是先Y轴后X轴。

border-radius只有在以下版本的浏览器：Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+支持border-radius标准语法格式，对于老版的浏览器，border-radius需要根据不同的浏览器内核添加不同的前缀，比说Mozilla内核需要加上“-moz”，而Webkit内核需要加上“-webkit”等，那么我们为了能兼容各大内核的老版浏览器，我们看看border-radius在不同内核浏览器下的书写格式：

1、Mozilla(Firefox,Flock等浏览器)

-moz-border-radius-topleft: //左上角
-moz-border-radius-topright: //右上角
-moz-border-radius-bottomright: //右下角
-moz-border-radius-bottomleft: //左下角

等价于：

-moz-border-radius: //简写

2、WebKit (Safari,Chrome等浏览器)

-webkit-border-top-left-radius: //左上角
-webkit-border-top-right-radius: //右上角
-webkit-border-bottom-right-radius: //右下角
-webkit-border-bottom-left-radius: // 左下角

等价于：

-webkit-border-radius: //简写

3、Opera浏览器：

border-top-left-radius: //左上角
border-top-right-radius: //右上角
border-bottom-right-radius: //右下角
border-bottom-left-radius: //左下角

等价于：

border-radius: //简写

4、Trident (IE)

IE<9不支持border-radius;IE9下没有私有格式，都是用border-radius，其写法和Opera是一样的。

为了不管是新版还是老版的各种内核浏览器都能支持border-radius属性，那么我们在具体应用中时需要把我们的border-radius格式改成：

-moz-border-radius:
-webkit-border-radius:
border-radius:

如果需要拆分开的就等价于下面的代码：

-moz-border-radius-topleft: //左上角
-moz-border-radius-topright: //右上角
-moz-border-radius-bottomright: //右下角
-moz-border-radius-bottomleft: //左下角
-webkit-border-top-left-radius: //左上角
-webkit-border-top-right-radius: //右上角
-webkit-border-bottom-right-radius: //右下角
-webkit-border-bottom-left-radius: // 左下角
border-top-left-radius: //左上角
border-top-right-radius: //右上角
border-bottom-right-radius: //右下角
border-bottom-left-radius: //左下角