css Gradients（渐变）

渐变分为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);}

高手勿喷啊！

，没有行囊，没有目的，我孤独的走在路上，

相关文章：

你感兴趣的文章：

标签云：