Gradients 漸變

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

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

1. 官方定義

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

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

2. 慕課解釋

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

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

3. 語法

3.1 線性漸變

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

屬性說明

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

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

3.2 徑向漸變

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

屬性說明

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

4. 兼容性

5. 實例

5.1 線性漸變

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

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

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

效果圖

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

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

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

效果圖

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

3. 創(chuàng)建一個從左到右的漸變背景色。

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

效果圖

4. 創(chuàng)建一個從左上到右下的漸變顏色。

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

效果圖

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

5. 創(chuàng)建一個 30 度角的線性漸變。

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

效果圖

6. 創(chuàng)建一個 0 度角的線性漸變。

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

效果圖

5.2 徑向漸變

1. 創(chuàng)建一個紅色到綠色的徑向漸變。

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

效果圖

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

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

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

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

3. 創(chuàng)建一個真正的圓形漸變。

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

4. 創(chuàng)建一個重復(fù)的徑向漸變。

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

效果圖

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

.demo{
    width: 100px;
    height: 100px; 
    float: left;
    margin-right: 10px;;  
}
.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,可以清楚的觀察到漸變的中心點都是元素的中心點，當時他們的過度點出現(xiàn)了明顯的不同。

6. 改變漸變的中心點。

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

效果圖

說明，也可以是 數(shù)量單位例如

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

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

6. 經(jīng)驗分享

1. 不要寫成下面這樣

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

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

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

3. 設(shè)置了漸變背景色就不能在用一個元素內(nèi)在使用圖片了如果想疊加圖片可以像下面這樣的結(jié)構(gòu)：

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

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

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

7. 小結(jié)

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