CSS3漸變(Gradients)-線性漸變

CSS3漸變(Gradients)可以讓你在兩個或多個指定顏色之間顯示平穩的過度，包括透明度。

以前，你必須使用圖像來實現這些效果。但是，通過Css3漸變(Gradients)，你可以減少下載的事件和寬帶的使用。此外，漸變效果元素在放大時看起來效果更好，因為漸變(gradient)是由瀏覽器生成的。

CSS3定義了兩種類型的漸變(gradients):

1.線性漸變(Linear Gradients)-向下、向上、向左、向右、對角方向：（to bottom、to top、to right、to left、to bottom right，等等）

2.徑向漸變(Radial Gradients)-由他們的中心定義

瀏覽器支持：

表中的數字指定了完全支持該屬性的第一個瀏覽器版本。

后邊跟 -webkit-、-moz- 或 -o- 的數字指定了需加上前綴才能支持屬性的第一個版本。

屬性	IE	Google	FF	Safari	Opera
linear-gradient	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-
radial-gradient	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.6 -o-
repeating-linear-gradient	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-
repeating-radial-gradient	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.6 -o-

CSS3 線性漸變（linear-gradient/repeating-linear-gradient）

創建一個線性漸變，至少定義兩種顏色結點，用於呈現平穩過度的顏色。同時，你也可以設置一個起點和一個方向（或一個角度）。

指定方向語法：

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

1.線性漸變-默認情況下，從上到下

.divOne {
    width: 100px;
    height: 100px;
    background: linear-gradient(red, blue);
}

    <!--線性漸變-默認情況下，從上到下
    1.支持IE10及以上瀏覽器
    -->
    <div class="divOne"></div>

2.線性漸變-從左到右

.divOne {
    width: 100px;
    height: 100px;
    background: linear-gradient(to right, red, blue);
}

3.線性漸變-對角

.divOne {
    width: 100px;
    height: 100px;
    background: linear-gradient(to bottom right, red, blue);
}

指定角度語法：

如果你想要在漸變方向上做更多的控制，你可以定義一個角度，而不用使用預定義的方向。

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

角度是指水平線和漸變線之間的角度，逆時針方向計算。換句話說，0deg 將創建一個從下到上的漸變，90deg 將創建一個從左到右的漸變。

4.線性漸變-指定角度：

.divOne {
    background: linear-gradient(30deg, red, blue);
}

.divTwo {
        background: linear-gradient(0deg, red, blue);
}
.divThree{
        background: linear-gradient(90deg, red, blue);
}

5.線性漸變-使用多個顏色點：

        .divOne {
            background: linear-gradient( red, green, blue);
        }
        .divTwo {
            background: linear-gradient( red 10%, green 85%, blue 90%);
        }
        .divThree {
            background: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
        }

6.線性漸變-使用透明度（Transparent），透明度的漸變

CSS3 漸變也支持透明度（transparency），可用於創建減弱變淡的效果。

為了添加透明度，我們使用 rgba() 函數來定義顏色結點。rgba() 函數中的最后一個參數可以是從 0 到 1 的值，它定義了顏色的透明度：0 表示完全透明，1 表示完全不透明。

.divOne {
    background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}

.divTwo {
    background: linear-gradient(to bottom, rgba(255, 255, 0, 0.3), rgba(0, 255, 255, 1));
}

7.重復的線性漸變-repeating-linear-gradient()

.divOne {
    background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

.divTwo {
    background: repeating-linear-gradient(to right, rgba(255, 255, 0, 0.3) 10%, rgba(0, 255, 255, 1) 20%);
}

 更多：

Css3漸變(Gradients)-徑向漸變