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>