CSS3实例-使用圆角

 

如果说，WAP2.0网页的机型、浏览器适配给我们无线制作经理造成了巨大的心理阴影，那么从iPhone、Android这些高端手机应用起，我们终于可以庆幸比其他同行提前迎来了一个新时代，这两种高端手机上的Safari Mobile和Google Android浏览器近乎完mei的渲染效果，让css3有了尽情挥洒的天地。

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

css3新增实现圆角的方法有2种，border-raidus和border-image，前一种合适背景是纯色填充，或能规律平铺，且有纯色border的元素，例如这些：

对于这类圆角元素，我们只需定义背景、边框和圆角角度。以这个按钮元素为例：

背景切片btn_bg.png，图片宽度从1px到100px，是降低平铺资源消耗还是节约流量请自己把握，这个你懂的：

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

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

其中，对于一些只有半边有圆角的对象，还可以单独定义，webkit和moz下单独定义每个圆角的属性分别如下：

而border-image适合背景不能完全平铺、填充色值的圆角元素。顾名思义，这个属性其实就是用一张基本圆角图片来实现圆角的效果，例如这些：

这类元素或多或少，因为一两个像素的阴影、发光效果不能完全平铺，就可以利用border-image的九宫格原理，由一张图片来定义背景、边框、圆角。这种做法的缺陷是边框、圆角和背景都是图片上固定的，只能水平或垂直拉伸元素宽度，不能直接通过css修改角度和元素高度或宽度。尽管如此，我们还是要感谢这个css属性带来的全新体验。

以这个按钮为例：

它的背景是这样一个内发光、阴影的样式，平铺的话阴影还好说，但是左侧的内发光就不好处理：

border-image的原理，是将这类图片分解成一个九宫格：

其中1、3、7、9作为四个角的背景；

2、4、6、8作为四个边的背景，如果不想改变原有按钮设计质感，只能2、8横向拉伸；

中间的5作为中间部分的背景，同样，要保持设计质感，只能横向拉伸。

border-image的具体写法是：

其中第一个参数是图片路径；

第2-5个参数是九宫格分割时分别距离上、右、下、左的距离，可以简写成1-3个，注意，这里的数值没有单位（几次效果没出来，查了半天发现都是因为这里习惯性的加了px，杯具），但是可以使用百分比；

后面两个参数是图片x、y方向重复的方式，有round（平铺），repeat（重复），stretch（拉伸）三种方式，默认是stretch，可简写成0-1个。

对于我们常用的按钮来说，在横向无论平铺、重复，还是拉伸，效果都是一样的。

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

注意，这里border-width必须配合使用，分别对应九宫格分隔出来的四条边的宽度。其实即使是九宫格分割出来了4条边，我们完全可以不使用其中任何一条，只要将这条边的border-width设置为0即可，这对用一张完整的圆角图片实现一对个半圆角按钮是很有用的：

---