css3渐变之线性渐变linear-gradient

线性渐变基本语法：

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

　　

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

参数：其共有三个参数

第一个参数表示线性渐变的方向，top 是从上到下、left 是从左到右，如果定义成 left top，那就是从左上角到右下角。
第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。  

 

从上到下的线性渐变

起点是橘红色（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部分：

<div>从上到下的线性渐变</div>

资源网站大全 https://55wd.com 我的007办公资源网站 https://www.wode007.com

从左到右的线性渐变

起点是橘红色（orangered），慢慢过渡到橘色（orange）

css部分：

.div2{
            margin:30px auto;
            width:300px;
            height:100px;
            color: #fff;
            text-align: center;
            line-height: 100px;
            background:-webkit-linear-gradient(left,orangered,orange);/* Safari 5.1 - 6.0 */
            background:-o-linear-gradient(right,orangered,orange);/* Opera 11.1 - 12.0 */
            background:-moz-linear-gradient(right,orangered,orange);/* Firefox 3.6 - 15 */
            background:linear-gradient(to right,orangered,orange);/* 标准*/
 }

　　

html部分：

<div>从左到右的线性渐变</div>

　　

 

从左上角开始到右下角的线性渐变

起点是红色（orangered），慢慢过渡到深绿色（orange）

css部分：

.div2{
            margin:30px auto;
            width:300px;
            height:100px;
            color: #fff;
            text-align: center;
            line-height: 100px;           
            background:-webkit-linear-gradient(left top,red,darkslategray);
            background:-o-linear-gradient(bottom right,red,darkslategray);
            background:-moz-linear-gradient(bottom right,red,darkslategray);
            background:linear-gradient(to bottom right,red,darkslategray);
}

　　

html部分：

<div>从左上角开始到右下角的线性渐变</div>

　　

 

带有指定的角度的线性渐变

如果要在渐变的方向上做更多的控制，可以通过定义一个角度来实现；

基本语法：

background: linear-gradient(angle, color1, color2);

　　

angle：即角度是指水平线和渐变线之间的角度，逆时针方向计算

那么，如何在线性渐变上使用角度？

css部分：

.div4{
            margin:30px auto;
            width:300px;
            height:100px;
            color: #fff;
            text-align: center;
            line-height: 100px;
            background:-webkit-linear-gradient(180deg,red,darkslategray);
            background:-o-linear-gradient(180deg,red,darkslategray);
            background:-moz-linear-gradient(180deg,red,darkslategray);
            background:linear-gradient(180deg,red,darkslategray);
}

　　

html部分：

<div>带有指定的角度的线性渐变</div>