CSS3 漸變（Gradients）

1：基本概念

• 在兩個或者多個指定的顏色之間顯示平穩的過渡

• 漸變的效果是由瀏覽器生成的

• 漸變的類型主要分爲兩種：線性漸變（Linear Gradients）和徑向漸變（Radial Gradients）；線性漸變是一個向上、向下、向左、向右或者對角方向的漸變，而徑向漸變則是由它們的中心定義。

• 做爲元素的background-image（background）使用

2：瀏覽器的支持狀況

由於它是一個比較新的屬性，因此它在瀏覽器中使用時須要添加它的前綴，下面的圖片是徹底支持該屬性的第一個瀏覽器版本：

不一樣廠商的瀏覽器的前綴也是不同的，好比：

.header {
    /* Safari */
    background: -webkit-linear-gradient(red, blue);

    /* Opera */
    background: -o-linear-gradient(red, blue);

    /* Firefox */
    background: -moz-linear-gradient(red, blue);

    /* 標準的語法, 放在最後 */
    background: linear-gradient(red, blue);
}

不一樣的瀏覽器廠商在實現這個標準時也是略有不一樣的，好比關於方向的定義，角度的定義，是順時針仍是逆時針。

3：線性漸變（Linear Gradients）

基本語法

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

在不添加角度和方向的前提下，默認是從上到下

background: linear-gradient(color1, color2);

從左到右

to right/left/bottom/top
background:linear-gradient(to right,#147B96,#E6D205);

對角（須要把兩個方向相結合）

to right bottom/right top/left bottom/left top
background:linear-gradient(to bottom right,#147B96,#E6D205);

使用角度

background: linear-gradient(45deg, #147B96 , transparent);

多種顏色

background: linear-gradient(to right, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
background: linear-gradient(to right, #147B96, #E6D205 50px, #147B96 50px, #E6D205 50px, #147B96);

重複漸變

background: repeating-linear-gradient(to right, #147B96, #E6D205 5%, #147B96 10%, #E6D205 20%);

聲明多個 - 逗號分隔 - 最早聲明優先級最高

background: linear-gradient(green 10px, transparent 10px),
            linear-gradient(90deg,green 10px, transparent 10px) repeat left top / 40px,
            linear-gradient(transparent 40px, green 4px);

4：徑向漸變 (Radial Gradients)

基本語法

background: radial-gradient(center, shape size, start-color, ..., last-color);

漸變中心，整個圖形的中心點，既能夠使用px，也能夠使用%。

background-image: radial-gradient(0% 0%, red, green, blue);

漸變形狀，主要是有兩種：circle（圓形）和 ellipse（橢圓形）

background:radial-gradient(circle, red, green, blue);

漸變大小

• closest-side - 漸變的半徑長度爲從圓心到離圓心最近的邊

• closest-corner- 漸變的半徑長度爲從圓心到離圓心最近的角

• farthest-side- 漸變的半徑長度爲從圓心到離圓心最遠的邊

• farthest-corner - 漸變的半徑長度爲從圓心到離圓心最遠的角

background:radial-gradient(circle at farthest-corner, red, green, blue);

漸變中心、漸變形狀和漸變大小這三個就是徑向漸變的主要使用，除此以外，也能夠和線性漸變同樣使用多種顏色，重複漸變以及聲明多個漸變。

這篇文章主要分享了Linear Gradients（線性漸變）與Radial Gradients（徑向漸變）的基本概念, 介紹了兩種漸變的經常使用屬性，最後結合了Linear Gradients實例介紹了CSS3漸變在實際中的部分應用場景。