css漸變

1、定義

CSS3漸變（gradients）是在兩個或多個指定的顏色之間顯示平穩的過渡。

2、分類

線性漸變（LinearGradients）-向下/向上/向左/向右/對角方向
徑向漸變（cGradients）-由它們的中心定義

3、線性漸變

設定一個起點和一個方向（或一個角度）

（1）從上到下
起點是紅色，慢慢過渡到藍色：

#grad{
    background-image:linear-gradient(#e66465,#9198e5);
}

（2）、從左到右
起點是紅色，慢慢過渡到藍色：

#grad{
    height:200px;
    background-image:linear-gradient(toright,red,yellow);
}

（3）對角

從左上角開始（到右下角）的線性漸變。起點是紅色，慢慢過渡到藍色：

#grad{
    height:200px;
    background-image:linear-gradient(to bottom right,red,yellow);
}

（4）對角使用多個顏色結點
帶有多個顏色結點的從上到下的線性漸變：

#grad{
    background-image:linear-gradient(red,yellow,green);
}

（5）使用透明度（transparent）

從左到右的線性漸變，帶有透明度：

#grad{
    background-image:linear-gradient(toright,rgba(255,0,0,0),rgba(255,0,0,1));
}

4、徑向漸變

徑向漸變由它的中心定義。至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。同時，你也可以指定漸變的中心、形狀（圓形或橢圓形）、大小。預設情況下，漸變的中心是center（表示在中心點），漸變的形狀是ellipse（表示橢圓形），漸變的大小是farthest-corner（表示到最遠的角落）。

（1）、顏色結點均勻分佈（預設情況下）

#grad{
    background-image:radial-gradient(red,yellow,green);
}

（2）、顏色結點不均勻分佈

#grad{
    background-image:radial-gradient(red5%,yellow15%,green60%);
}

（3）、設定形狀
shape引數定義了形狀。它可以是值circle或ellipse。其中，circle表示圓形，
ellipse表示橢圓形。預設值是ellipse。

#grad{
    background-image:radial-gradient(circle,red,yellow,green);
}