CSS3背景渐变效果

Firefox和Safari/Chrome对CSS3的支持是挺不错，本文将展示CSS渐变的简单实现以及该属性在Mozilla和webkit内核浏览器中的不同。

一. Webkit

background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));

• 渐变的类型 (linear)
• 渐变开始的X Y 轴坐标(0 0 – 或者left-top)
• 渐变结束的X Y 轴坐标(0 100%或者left-bottom)
• 开始的颜色 (from(red))

• 结束的颜色 (to(blue))

  

二. Mozilla

background: -moz-linear-gradient(top, red, blue);

请注意将渐变的类型——linear——放到了属性前缀中了

• 渐变开始 (top – 也可以使用度数，比如-45deg)
• 开始颜色 (red)
• 结束颜色 (blue)

三. 部分渐变

background: white; /* 为较旧的或者不支持的浏览器设置备用属性 */
background: -moz-linear-gradient(top, #dedede, white 8%);
background: -webkit-gradient(linear, 0 0, 0 8%, from(#dedede), to(white));
border-top: 1px solid white;

效果如下：

应该说效果是非常好看的，当然小伙伴们也可以设计更好看的渐变

注：IE并不提供渐变，而是提供滤镜效果filter