CSS3颜色渐变应用方法总结附实例(上篇)

在网页设计中，有时候会需要用到渐变效果，渐变可以创建出类似于彩虹的视觉图案效果，在没有CSS3之前，为了显示一个渐变需要专门制作一个图片，这种不法不但不灵活还增加请求数，而CSS3可以轻松实现网页渐变效果，用于做渐变背景、渐变导航、配合CSS3动画做特效等。在CSS3中，Gradient（渐变）分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。CSS颜色线性渐变的语法在各种浏览器里的实现稍微有些不同，但最后是统一标准的：

CSS颜色线性渐变的语法:

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

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

注意，我们首先设定了一个背景色。这个颜色是在万一用户使用的浏览器不支持CSS渐变色(Gradients)技术时使用的颜色。CSS渐变色(Gradients)技术里还支持带有角度的渐变方向，而不仅仅只有直上直下或直左直右。我们可以用下面的语法实现它：

我们可以做的更复杂些….一个色彩缤纷的CSS颜色渐变？下面我们来做一个彩虹：

关于IE对CSS颜色渐变技术的支持做一些说明：在早期IE是使用filter和-ms-filter语法实现渐变色，而最新版的IE里改为了-ms-linear-gradient语法。我们可以使用CSS里条件判断语句来解决这个问题：

上篇是关于CSS3颜色渐变语法的一些简单总结，下篇将分开详细为大家进行分享CSS颜色渐变的使用及相关案例。敬请关注。