技術標籤：CSSCSS3csscss3

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>

執行結果