本篇文章给大家带来的内容是关于css中颜色渐变的实现(三种方式)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
！！注意IE9及之前的版本不支持渐变。Safari要加-webkit-的前缀，Opera要加-o-的前缀，Firefox要加-moz-的前缀！
一、Linear Gradients(线性渐变)-向下/向上/向左/向右/对角方向
1.向下代码
渐变学习div{
width:200px;
height:200px;
}
.gradient{
background:-webkit-linear-gradient(#8A2BE2,#DC143C);/*for safari5.1-6.0*/
background:-o-linear-gradient(#8A2BE2,#DC143C);/*Opera 11.1-12.0*/
background:-moz-linear-gradient(#8A2BE2,#DC143C);/*firefox 3.6-15*/
background:linear-gradient(#8A2BE2,#DC143C);/*标准语法，必须放在最后*/
}
运行效果：
2.向上，换向下渐变的两个颜色顺序即可。替换上面代码运行结果为：
