16 使用CSS3渐变、倒影属性

16 使用CSS3渐变、倒影属性

对于正常的渐变背景，一般都是切丝然后平铺，至于横向平铺还是纵向平铺还是得看实际情况而定，复杂点的背景就只能切块图，然而CSS3可以让Firefox 和Safari/Chrome实现颜色渐变，IE可以用滤镜，这也是一种值得考虑的很酷的方法。

43.png

Firefox，属性“-moz-linear-gradient”有三个参数。第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。

属性“-webkit-gradient”是webkit引擎对渐变的实现，一共有五个参数。第一个参数表示渐变类型（type），可以是linear（线性渐变）或者radial（辐射渐变）。第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如left top（左上角）和left bottom（左下角）。第四个和第五个参数，分别是两个color-stop函数。color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。

IE依靠滤镜实现渐变。startColorstr表示起点的颜色，endColorstr表示终点颜色。GradientType表示渐变类型，0为缺省值，表示垂直渐变，1表示水平渐变。