前端基础入门学习线路之CSS渐变色效果的实现方法

通过CSS border-radius，我向大家展示了如何实现方形元素的圆角效果，这解决了以前美工画出这种效果而开发人员无法实现的问题。CSS渐变色(Gradients)也是一个类似的技术。现在火狐，谷歌浏览器，Safari，IE8+都支持这种技术，我们可以安全的在网站上使用它。下面我们来看看CSS渐变色(Gradients)技术基本的语法，浏览器支持情况和缺陷。

　　CSS渐变色(Gradients)术语和解释

　　CSS渐变色(Gradients)能让我们用一种颜色渐变的效果修饰一个空间——从一种颜色过渡到另外一种颜色——填充这个空间。渐变色有两个形式：linear(线性渐变) 和 radial (环形渐变)。很显然CSS渐变色(Gradients)技术是产生了一种视觉图案效果，而实现这种视觉效果很简单，能通过简单编程实现。CSS3里很早就引入了CSS渐变色(Gradients)，但这种技术的推广却经历了很长时间。

　　CSS颜色线性渐变的语法

　　CSS颜色线性渐变的语法在各种浏览器里的实现稍微有些不同，但最后是统一标准的：

　　background-image: linear-gradient( || ,]? , [, ]*)

　　第一个参数是渐变起始点或角。第二个参数是一种颜色停止点(color stops)。至少需要两种颜色(起点和终点)，你可以添加任意种颜色来增加颜色渐变的丰富程度。对颜色停止点的定义可以是一种颜色，或一种颜色加一个百分比：

　　/* color-stop(percentage/amount, color) */

　　color-stop(0.20, red)

　　因为CSS渐变色(Gradients)技术是CSS3里比较新的技术，属于高级的CSS功能，于是每种浏览器对这种技术的实现都添加了一些自己的特色。例如以WebKIt为渲染引擎的谷歌浏览器，就对它实现了多种语法。下面的这段代码基本包括了所有自顶向下颜色渐变的所有情况：

　　#example1 {

　　/* 底色 */

　　background-color: #063053;

　　/* chrome 2+, safari 4+; multiple color stops */

　　background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));

　　/* chrome 10+, safari 5.1+ */

　　background-image: -webkit-linear-gradient(#063053, #395873, #5c7c99);

　　/* firefox; multiple color stops */

　　background-image: -moz-linear-gradient(top,#063053, #395873, #5c7c99);

　　/* ie 6+ */

　　filter: progid:DXImageTransform