渐变分为4类
1：线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
2：径向渐变（Radial Gradients）- 由它们的中心定义
3：对角渐变
4：角度渐变
以下是我写的代码
div{float: left;width: 100px;height:100px;}
.odiv1{
background:-moz-linear-gradient(red,blue);
background:-webkit-linear-gradient(red,blue);
background:-ms-linear-gradient(red,blue);
background:-o-linear-gradient(red,blue);
background:linear-gradient(red,blue);/*线性渐变默认情况下是从上到下*/
}
.odiv2{
background:-moz-radial-gradient(red,blue);
background:-webkit-radial-gradient(red,blue);
background:-ms-radial-gradient(red,blue);
background:-o-radial-gradient(red,blue);
background: radial-gradient(red,blue);/*径向渐变*/
}
.odiv3{/* 标准的语法（必须放在最后） */
background:-webkit-linear-gradient(right,red,blue);
background:-moz-linear-gradient(right,red,blue) ;
background:-ms-linear-gradient(right,red,blue);
background:-o-linear-gradient(right,red,blue);
background: linear-gradient(to right,red,blue);/*从右向左渐变*/
}
.odiv4{/*对角渐变左上角開始（到右下角）的线性渐变*/
background: -webkit-linear-gradient(left top,red,blue);
background:-moz-linear-gradient(bottom right,red,blue);
background: -ms-linear-gradient(bottom right,red,blue);
background: -o-linear-gradient(bottom right,red,blue);
background:linear-gradient(to bottom right,red,blue);
}
.odiv5{/*以60度进行的渐变*/
background:-webkit-linear-gradient(60deg,red,blue);
background:-moz-linear-gradient(60deg,red,blue) ;
background:-ms-linear-gradient(60deg,red,blue);
background:-o-linear-gradient(60deg,red,blue);
background:linear-gradient(60deg,red,blue);
}
<div class="odiv1"></div>
<div class="odiv2"></div>
<div class="odiv3"></div>
<div class="odiv4"></div>
<div class="odiv5"></div>
高手勿喷啊！
本文转自mfrbuaa博客园博客，原文链接：http://www.cnblogs.com/mfrbuaa/p/5141826.html，如需转载请自行联系原作者
