网页的应用中，有时会用到渐变色，文汇小编在这里跟大家分享一下使用CSS写渐变色的方法。
如下图，是由红色到青色的渐变：
附样式代码：
.color1{background:-moz-linear-gradient(top,rgb(255,50,98),rgb(50,255,228));
background:-ms-linear-gradient(top,rgb(255,50,98),rgb(50,255,228));
background:-o-linear-gradient(top,rgb(255,50,98),rgb(50,255,228));
background:-webkit-linear-gradient(top,rgb(255,50,98),rgb(50,255,228));
}
[注1]-moz-linear-gradient用于火狐浏览器，-ms-linear-gradient用于IE10，-o-linear-gradient用于欧朋浏览器11.10及以上版本，-webkit-linear-gradient用于谷歌浏览器。
[注2]方向值取top、bottom、left、right，其中top表示从上往下，bottom表示从下往上，left表示从左往右，right表示从右往左。
[注3] rgb(255,50,98)为红色的rgb编码。
我们可以将上述代码的top改成left，颜色渐变的方向就变成了从左往右。即：
.color2{background:-moz-linear-gradient(left,rgb(255,50,98),rgb(50,255,228));
background:-ms-linear-gradient(left,rgb(255,50,98),rgb(50,255,228));
background:-o-linear-gradient(left,rgb(255,50,98),rgb(50,255,228));
background:-webkit-linear-gradient(left,rgb(255,50,98),rgb(50,255,228));
}
效果如下图：
以上两个例子都是从一种颜色到另一种颜色的渐变，下面说一下同一个颜色的不同透明度的变化。如图：
我们只需将rgb改为rgba，并在参数里面追加一个表示透明度的参数即可，参数值的范围为0~1,0表示完全透明，1表示不透明。附代码如下：
.color3{background:-moz-linear-gradient(left,rgba(255,50,98,1),rgba(255,50,98,0.2));
background:-ms-linear-gradient(left,rgba(255,50,98,1),rgba(255,50,98,0.2));
background:-o-linear-gradient(left,rgba(255,50,98,1),rgba(255,50,98,0.2));
background:-webkit-linear-gradient(left,rgba(255,50,98,1),rgba(255,50,98,0.2));
}
