在css3尚未真正普及前，我们要实现圆角效果，还是需要颇费苦心的。一方面需要照顾还占有强势地位的低版本IE用户群，另一方面由于css3目前还属草案阶段，有些浏览器暂且以私有属性的方式去实现css3的一些东西。如目前的Firefox3.6.6实现圆角，就必须使用私有属性-moz-border-radius。
所有的这些，让我们看到，圆角的标准化实现目前还处理尤抱琵琶半遮面的阶段。不过，曙光已现，只待w3c加快推进css3的进程和IE9或更高版本IE的推出。
到那时，至于还在使用低版本IE的用户，你或许可以强势点，不兼顾这个群体；又或许你可以采取优雅降级的方式，给低版本IE用户一个“普通版”；再不然，你也可以单独为低版本IE另做一份。相信可以找到一个适合你的处理方式。
这是闲话，点到即止。接下来，还是让我们来看看标准化的圆角实现。DEMO：css3 border-radius圆角详解
首先，我们要知道css3的圆角属性为：border-radius，其次还需了解一个矩形有4个角，也就是说，我们可以一一给每个角设置是否具有圆角属性。
border-radius最多可以设置4个值，分别是矩形4个圆角的半径。你可以如以下这般设置：
代码:
你可以只设置1个值，其表达的是说当前设置这个属性的元素，四个角都为圆角，且每个圆角的半径都为10px。当四个圆角的大小相同时，会这样设置。
代码:
你也可以设置为2个值，第1个值代表左上圆角和右下圆角，第2个值代表右上圆角和左下圆角。当左上圆角和右下圆角大小相同，且右上圆角和左下圆角大小相同时，会这样设置。
代码:
你也可以设置为3个值，第1个值代表左上圆角，第2个值代表右上圆角和左下圆角，第3个值代表右下圆角。当左上圆角和右下圆角大小不同，且右上圆角和左下圆角大小相同时，会这样设置。
代码:
你也可以将4个值分别设置，它们代表：左上圆角，右上圆角，右下圆角，左下圆角。当4个圆角的大小不同时，会这样设置。
当然，你也可以将4个角拆分成4个单独的属性来设置：
代码:
以上这些都属于css3圆角实现的标准属性，Chrome5 and Later, Safari5 and Later, Opera10.53 and Later都已支持，在当前Firefox3.6.6版本下，依然需要私有属性来实现。
Firefox实现圆角的私有属性分别为：
代码:
相对于使用背景图片及多标记1个像素1个像素的叠加实现，css3的圆角实现，显得那么雅致，让我们一起期待css3一统的那天吧。
1142
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
