css3实现边框圆角样式

  基本语法:

 border-radius: 5px;

 

兼容大多数浏览器:

/*兼容Mozilla(Firefox, Flock等浏览器)*/

-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;

/*兼容WebKit (Safari, Chrome等浏览器)*/
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;

/*兼容Opera浏览器*/
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;

 

关于IE:

IE9 以下版本不支持 border-radius，而且 IE9 没有私有格式，都是用 border-radius，其写法和 Opera 是一样的

 

参考文章:

css3 boder-radius实现边框圆角(http://www.studyofnet.com/news/276.html)