Border-radius:使用CSS创建圆角

Border-radius是CSS3新增的属性，是Border的子属性。一直喜爱鼓捣CSS的我，免不了动手尝试，不过每次尝试后就把那些自己处理过代码丢在硬盘里，那天有兴趣了，再去网上找资料，这次心想不如把自己在学习中的心得和大家分享出来。但想系统的把自己对某件事务的理解和认识写出来是件很不容易的事情，毕竟我还没有达到那种境界。

我每次在写教程之类时总担心那一步写的不详细，让读者不明白，所以文章总是臭长。臭长就臭长吧，没有写出来我心里还总觉得遗憾，哈哈～。

border-radius的值：

例1：

同等于：

例2：

同等于：

例3：

例3显示效果如下：

各个浏览器的表现还不同，我在Win XP SP3环境下：Forefox2.0.0、Forefox3.5.2、Chrome2.0.172.39，Safari3.2.1做了比较，看补图。

要更深入的了解和认识，就需要不断尝试

例4

例4显示效果如下：

例5

例5显示效果如下：

border-radius同等

-moz-border-radius / -webkit-border-radius

border-top-left-radius同等

-moz-border-radius-topleft / -webkit-border-top-left-radius

border-top-right-radius同等

-moz-border-radius-topright / -webkit-border-top-right-radius

border-bottom-right-radius同等

-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius

border-bottom-left-radius同等

-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

相关参考：

http://www.w3.org/TR/2008/WD-css3-background-20080910/#border-radius
http://www.css3.info/preview/rounded-border/
https://developer.mozilla.org/en/CSS/-moz-border-radius