CSS3系列—圆角效果

border-radius圆角效果是CSS3新增加的效果，现在的很多网页都使用了这个效果。

border-radius:[<length>|<percentage>]{1,4}[/[<length>|<percentage>]{1,4}]?   

其中<length>:用长度值设置对象的圆角半径长度。不允许负值

<percentage>以百分比设置对象的圆角半径航渡，不能设置负值。

提供两个参数，两个参数之间用/分隔开，第一个参数表示水平半径，第二个参数表示垂直半径，若第二个参数没有设置，则说明等同于第一个参数。

每个参数可以设置四个值，分别表示，top-left（上左）top-right（上右）bottom-right(下右) bottom-left（下左）四个顺序作用于四个角。

也可以是以下情况：

每个参数可以设置一个值，表示top-left（上左）top-right（上右）bottom-right(下右) bottom-left（下左）都相同

每个参数可以设置两个值，表示top-left（上左）bottom-right(下右) 为第一个值，top-right（上右）和bottom-left（下左）为第二个值。

每个参数可以设置三个值，表示top-left（上左）为第一个值，top-right（上右）分别为第二，bottom-right(下右) 第三的值，而bottom-left（下左）也为第二个的值，即和top-right（上右）相同。

兼容性:css3在IE9上能用，但是在IE6,7,8上是不能使用的。

因为浏览器引擎的原因，针对firefox和safari、chrome有其特殊的写法：

-moz-border-radius:用于firefox

-webkit-border-radius：用于chrome和safari

写的时候要遵循一定的顺序：

<style>
.radius
{-moz-border-radius:30px;
-webkit-border-radius:30px;
-boeder-radius:30px;}
</style>

以下内容参考 http://www.phpernote.com/div-css/844.html

border-radius 也可以像 border 属性那样分开写，即：

border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius

那么针对firefox Safari和Chrome 则加上相应的前缀（-moz- -webkit-）就是了。