CSS3圆角（border-radius）
CSS3中的border-radius支持IE9+,chrome,firefox 2、3+,以及safari3.2+浏览器。
border-radius可直接使用，无需加前缀(注意：firefox13取消了-moz前缀，即由原来的-moz-border-radius变为border-radius，加上前缀会造成无法显示圆角，chrome加前缀和不加前缀都可以)border-radius后面直接加值即可，该值来确定圆角的大小，如：border-radius:5px;
1、有边框：
<!DOCTYPE html> <html> <head> <title></title> <style> #div1{ padding: 10px; width:300px; height:100px; border:3px solid #cc0000; border-radius:10px; } </style> </head> <body> <div id="div1"></div> </body> </html>
效果：
2、无边框
在css中添加颜色代码即可
background: #cc0000;
效果
无边框完整代码：
<!DOCTYPE html> <html> <head> <title></title> <style> #div2{ padding: 10px; width:300px; height:100px; border:3px solid #cc0000; border-radius:10px; background: #cc0000; } </style> </head> <body> <div id="div2"></div> </body> </html>
3、四角不同大小
四角不同大小特别简单，使用border-radius:5px 10px 15px 20px;整合即可。
如下效果：
完整代码是：
<!DOCTYPE html> <html> <head> <title></title> <style> #div3{ padding: 10px; width:300px; height:100px; border:3px solid #cc0000; border-radius:5px 10px 15px 20px; background: #cc0000; } </style> </head> <body> <div id="div3"></div> </body> </html>
