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.htmlborder-radius 也可以像 border 属性那样分开写，即：border-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radiusborder-top-left-radius那么针对firefox Safari和Chrome 则加上相应的前缀（-moz- -webkit-）就是了。