Gradients 漸變

在以前遇到漸變的背景，我們只能選擇使用圖片，而現在通過 gradients 這個屬性就可以實現顏色的漸變。它的實現是通過瀏覽器生成的，可以當成是矢量圖形。學會它只需要幾個字符就可以生成一個很大的漸變圖形。

不過值得注意的是雖然它是一個顏色，但是使用它之后就不能再使用背景圖片了。

1. 官方定義

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

以前，你必須使用圖像來實現這些效果。但是，通過使用 CSS3 漸變（gradients），你可以減少下載的事件和寬帶的使用。此外，漸變效果的元素在放大時看起來效果更好，因為漸變（gradient）是由瀏覽器生成的。
CSS3 定義了兩種類型的漸變（gradients）：
線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
徑向漸變（Radial Gradients）- 由它們的中心定義。

2. 解釋

這個屬性可以通過寫一些參數來生成一個漸變圖形，例如從黃色漸漸的過度到紅色，以前的實現方式這可以是一個徑向漸變，也可以是一個線性漸變。生成的這個漸變圖形在放大或縮小的時候都不會失真，因為它是由瀏覽器模擬生成的，就和我們使用矢量圖是一樣的效果。

線性漸變：顧名思義顏色的變化規律是沿著一條直線，它可以是各個方向上面的線。

3. 語法

3.1 線性漸變

.demo{
    background: linear-gradient(direction|angle, color-stop, color-stop, );
}

屬性說明

說明：創建一個線性漸變至少需要兩個顏色，他們的默認方向是從上到下的。

使用角度可以創建更細膩的漸變。但要注意的是：這個角度值得是水平方向和漸變線之間的角度。0度從下到上 90度從左到右，這樣一個順時針的變化。

3.2 徑向漸變

.demo{
    background-image: radial-gradient(shape size at position, start-color, , last-color);
}

屬性說明

說明： 徑向漸變同樣可以省略 shape size at position ，這樣默認就是一個圓形的徑向漸變，中心點在元素的中心點位置。 每個顏色后面可以跟一個表示長度的數值 % px rem 等，用來表示顏色的覆蓋區域，大于這個數值則開始徑向漸變。

4. 兼容性

5. 實例

5.1 線性漸變

<div class="demo"></div>

1. 創建一個從上到下顏色由紅變綠的線性漸變。

.demo{
    width: px;
    height: px;
    background: linear-gradient(red,green);
}

效果圖

如果漸變方向正好是上下方向，那么只要寫兩個顏色就好了。

2. 接上面一個例子，讓紅色在元素 70%的位置之后在開始向綠色漸變。

.demo{
    width: px;
    height: px;
    background: linear-gradient(red ,green);
}

效果圖

這個的實現只要在顏色后面加一個 % 數就好，也可以是其他的計量單位例如 px。

3. 創建一個從左到右的漸變背景色。

.demo{
    width: px;
    height: px;
    background: linear-gradient(to right,red ,green);
}

效果圖

4. 創建一個從左上到右下的漸變顏色。

.demo{
    width: px;
    height: px;
    background: linear-gradient(to right bottom,red,green);
}

效果圖

這里的 to right bottom 也可以寫成 right bottom 。

5. 創建一個 30 度角的線性漸變。

.demo{
    width: px;
    height: px;
    background: linear-gradient(deg,red,green);
}

效果圖

6. 創建一個 0 度角的線性漸變。

.demo{
    width: px;
    height: px;
    background: linear-gradient(deg,red,green);
}

效果圖

5.2 徑向漸變

1. 創建一個紅色到綠色的徑向漸變。

.demo{
    width: px;
    height: px;
    background:radial-gradient(red,green);
}

效果圖

說明：漸變默認形狀是橢圓形，但是如果在一個寬度和高度相等的元素內則會變成圓形，但是其實還是橢圓的，只是看到的像圓形，這是因為兩個中心點重合了。

2. 創建一個橢圓紅色到綠色的假圓形徑向漸變。

.demo{
    width: px;
    height: px;
    background:radial-gradient(red,green);
}

說明：這不是真的圓形如果寬度和高度不相等則變成橢圓的。

3. 創建一個真正的圓形漸變。

.demo{
    width: px;
    height: px;
    background:radial-gradient(circle,red,green);
}

4. 創建一個重復的徑向漸變。

.demo{
    width: px;
    height: px;
    background:repeating-radial-gradient(circle,red ,green );
}

效果圖

5. 設定漸變的不同size我們左下對比。

.demo{
    width: px;
    height: px; 
    float: left;
    margin-right: px;;  
}
.demo0{
    background-image: radial-gradient( red, green);
}
.demo1{
    background-image: radial-gradient(closest-side , red, green);
}
.demo2{
    background-image: radial-gradient(farthest-side , red, green);
}
.demo3{
    background-image: radial-gradient(closest-corner , red, green);
}
.demo4{
    background-image: radial-gradient(farthest-corner , red, green);
}

效果圖

說明：從左到右依次為：默認 closest-side farthest-side closest-corner farthest-corner,可以清楚的觀察到漸變的中心點都是元素的中心點，當時他們的過度點出現了明顯的不同。

6. 改變漸變的中心點。

.demo{
    width: px;
    height: px; 
    background-image: radial-gradient( at top left,red, green);
}

效果圖

說明，也可以是 數量單位例如

background-image: radial-gradient( at  ,red, green);

我們可以把它理解為一個坐標。

6. 經驗分享

1. 不要寫成下面這樣

(left,circle,red 10%,yellow 50%,green 50%)

left 前面一定要加上 at 不然它的兼容性很不好。

2. 使用漸變背景色可以是 background 也可以是 background-image 但不要寫成 background-color 。

3. 設置了漸變背景色就不能在用一個元素內在使用圖片了如果想疊加圖片可以像下面這樣的結構：

<div class="demo">
    <div class="demo-img"></div>
</div>

通過在內部新建一個標簽來引用你想插入的圖片，并通過定位來達到想要的效果。

4. 盡量使用漸變而不是圖片，這樣可以減少網絡請求，也減少項目體積。

7. 小結

漸變屬性因為不兼容 IE8 瀏覽器，所以在使用這個的時候要做好降級處理。例如可以在 IE8 使用純色，或者通過圖片代替，而非 IE8 在使用漸變，這也可以通過 JS 判斷環境。