gradient设置上下渐变_css3渐变之线性渐变linear-gradient

线性渐变基本语法：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

为了创建一个线性渐变，必须至少定义两种颜色结点。同时，也可以设置一个起点和一个方向(或一个角度)。

颜色结点：要呈现平稳过渡的颜色。

例子：

从上到下的线性渐变，起点是橘红色(orangered)，慢慢过渡到橘色(orange)；

css部分(注意兼容性)：

.div1{

margin:30px auto;

width:300px;

height:100px;

color: #fff;

text-align: center;

line-height: 100px;

background:-webkit-linear-gradient(orangered,orange);

background:-o-linear-gradient(orangered,orange);

background:-moz-linear-gradient(orangered,orange);

background:linear-gradient(orangered,orange);

}

html部分：

从上到下的线性渐变

效果如图：