CSS3 Linear Gradient || CSS3 线性渐变

CSS3 渐变可以在两个或多个指定的颜色之间平稳呈现过渡。

Linear Gradient 线性渐变

//语法：
background: linear-gradient(direction, color-stop1, color-stop2, ...);

创建一个线性渐变，必须至少定义两种颜色节点（呈现的平稳过渡的颜色）。另外，你也可以设置一个起点和一个方向（或角度）。

通过设置 bottom,top,right,bottom right，0deg，90deg 等值，可以改变颜色渐变的方向（或角度）。

<style>
div{
    width: 200px;
    height: 150px;
}
/*渐变，使用方向，方向前需要加上 to */
.div1{
    background: linear-gradient(to bottom left, blue, green, white);
}
/*渐变,使用角度*/
.div2{
    background: linear-gradient(60deg, blue, green, white);
}
/*重复性渐变*/
.div3{
    background: repeating-linear-gradient(blue, green 20px);
}
</style>


<div class="div1"></div><br/>
<div class="div2"></div><br/>
<div class="div3"></div>

运行结果