CSS3实战:尽情的实现网页圆角效果

　　在没有css3 以前，或者说，在webkit没有占绝对的优势以前，圆角对于制作经理来说，都是一个纠结的死角。九宫格、N层div嵌套、一个图片的十八般切法，甚至不 惜恐吓威胁设计师：你再做圆角，我就死给你看!好吧，到了高端手机时代，这一切恩怨都可以抛下了，一个html元素、几行css，全部搞定。现在我们可以 拥抱设计师，大声宣布：让我们尽情圆角吧!事情要从我们无线的第一个高端手机web应用——手机微博高端版说起，作为一个完全针对高端手机的web项目， 经过我们初步测试，css3的绝大多数属性都能在iPhone、Android这些高端手机自带浏览器上完美表现，那么，此时不用更待何时?!于是，我们 的设计gg就有了一次痛快淋漓的圆角体验，请看这些圆角们：

　　这个按钮完整的代码是这样的：

　　其中-webkit开头的属性针对webkit内核浏览器生效，就是我们的iPhone、Android高端机自带浏览器，-moz开头的属性 主要是因为一般调试都是在firefox下进行，为调试时展示正常效果而加。有些人还会再加个border-radius，这个大概对Chrome和 ie9生效，对目前高端手机上的浏览器这一项暂时没用，让我们先舍弃它吧。

　　另外，需要说明的是，border-radius，顾名思义，是要有border，才有radius，设置border-radius时，border-width不能为0。而类似这样直接给图片定义圆角的设计，赶紧给我住手!