html直线渐变,如何用css实现一条直线渐变效果

多看手册 多看手册 多看手册

hi013z左右方向渐变

#grad1 {

height: 200px;

background: -webkit-linear-gradient(left, rgba(251, 251, 251, 0.09),rgba(251, 251, 251, 0.59),#FFF); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(right, rgba(251, 251, 251, 0.09),rgba(251, 251, 251, 0.59) ,#FFF); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(right,rgba(251, 251, 251, 0.09),rgba(251, 251, 251, 0.59) ,#FFF); /* Firefox 3.6 - 15 */

background: linear-gradient(to right, rgba(251, 251, 251, 0.09)rgba(251, 251, 251, 0.59), ,#FFF); /* 标准的语法(必须放在最后) */

height: 6px;

}

#body{

background: #579f23;

}

线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向

径向渐变(Radial Gradients)- 由它们的中心定义