CSS3圆角

废话不多说,进入正题.

圆角(border-radius)

支持浏览器:IE9、Safari、Chrome、Firefox;(尽量使用最新版本,具体到哪个版本支持亦或不支持请百度)

不支持浏览器: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半径)