CSS3实现圆角

---

CSS #圆角 #css32012-07-12 11:45

---

通过CSS3轻松的实现圆角(border-radius)的浏览器:IE9、Safari、Chrome、Firefox;(尽量使用最新版本,具体到哪个版本支持亦或不支持请百度或yige.org)

不支持浏览器:IE6~8;

-moz-border-radius   兼容Firefox浏览器;

-webkit-border-radius   兼容Safari,Chrome浏览器;

对于Opera和IE请使用border-radius;
也就是说要兼容现在的浏览器需要3个属性同时写:border-radius,-moz-border-radius,-webkit-border-radius;

border:5px solid #dedede;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;

缩写:
border-radius:10px; (表示4个角都使用10px半径)
border-radius:5px 10px ; (表示左上角和右下角使用5px半径,右上角和左下角用10px)
border-radius:5px 10px 15px; (表示左上角使用5px半径,右上角和左下角使用10px半径,右下角使用15px半径)
border-radius:5px 10px 15px 20px; (表示左上角使用5px半径,右上角使用10px半径,右下角使用15px半径,左下角使用20px半径)

---

相关文章

• CSS中float用法介绍 2012/07/10
• IE中的BUG之margin-bottom失效 2012/06/29
• 超链接a标签去掉虚线框/虚线/去除虚线框 2012/06/14
• css非标准的ime-mode属性 2012/05/19
• 写css伪类时冒号前或后多个空格导致该规则失效 2012/05/19
• Div+CSS布局技巧 2012/04/28
• 常用的CSS知识 2012/04/26
• DIV+CSS网页布局常用的方法 2012/04/26
• 浏览器Firefox与IE在CSS样式表中的差异 2012/04/26
• 网页中用CSS样式表隐藏文字的方法 2012/04/26