[散分]CSS3 border-radius圆角的优雅实现

飘零雾雨 2010-07-22 04:58:02

转载请注明出处：css探索之旅；本文地址：CSS3 border-radius圆角的优雅实现

　　在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. border-radius:10px

你可以只设置1个值，其表达的是说当前设置这个属性的元素，四个角都为圆角，且每个圆角的半径都为10px。当四个圆角的大小相同时，会这样设置。
2. border-radius:10px 5px

你也可以设置为2个值，第1个值代表左上圆角和右下圆角，第2个值代表右上圆角和左下圆角。当左上圆角和右下圆角大小相同，且右上圆角和左下圆角大小相同时，会这样设置。
3. border-radius:10px 5px 1px

你也可以设置为3个值，第1个值代表左上圆角，第2个值代表右上圆角和左下圆角，第3个值代表右下圆角。当左上圆角和右下圆角大小不同，且右上圆角和左下圆角大小相同时，会这样设置。
4. border-radius:10px 9px 8px 7px

你也可以将4个值分别设置，它们代表：左上圆角，右上圆角，右下圆角，左下圆角。当4个圆角的大小不同时，会这样设置。

　　当然，你也可以将4个角拆分成4个单独的属性来设置：

1. 左上圆角：border-top-left-radius
2. 右上圆角：border-top-right-radius
3. 右下圆角：border-bottom-right-radius
4. 左下圆角：border-bottom-left-radius

　　以上这些都属于css3圆角实现的标准属性，Chrome5 and Later, Safari5 and Later, Opera10.53 and Later都已支持，在当前Firefox3.6.6版本下，依然需要私有属性来实现。

　　Firefox实现圆角的私有属性分别为：

1. 全圆角：-moz-border-radius
2. 左上圆角：-moz-border-radius-topleft
3. 右上圆角：-moz-border-radius-topright
4. 右下圆角：-moz-border-radius-bottomright
5. 左下圆角：-moz-border-radius-bottomleft

　　相对于使用背景图片及多标记1个像素1个像素的叠加实现，css3的圆角实现，显得那么雅致，让我们一起期待css3一统的那天吧。

...全文