Gradients 漸變在以前遇到漸變的背景，我們只能選擇使用圖片，而現在通過 gradients 這個屬性就可以實現顏色的漸變。它的實現是通過瀏覽器生成的，可以當成是矢量圖形。學會它只需要幾個字符就可以生成一個很大的漸變圖形。 不過值得注意的是雖然它是一個顏色，但是使用它之后就不能再使用背景圖片了。 1. 官方定義CSS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。 以前，你必須使用圖像來實現這些效果。但是，通過使用 CSS3 漸變（gradients），你可以減少下載的事件和寬帶的使用。此外，漸變效果的元素在放大時看起來效果更好，因為漸變（gradient）是由瀏覽器生成的。 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>
.demo{
width: px;
height: px;
background: linear-gradient(red,green);
}效果圖
如果漸變方向正好是上下方向，那么只要寫兩個顏色就好了。
.demo{
width: px;
height: px;
background: linear-gradient(red ,green);
}效果圖
這個的實現只要在顏色后面加一個 % 數就好，也可以是其他的計量單位例如 px。
.demo{
width: px;
height: px;
background: linear-gradient(to right,red ,green);
}效果圖
.demo{
width: px;
height: px;
background: linear-gradient(to right bottom,red,green);
}效果圖
這里的 to right bottom 也可以寫成 right bottom 。
.demo{
width: px;
height: px;
background: linear-gradient(deg,red,green);
}效果圖
.demo{
width: px;
height: px;
background: linear-gradient(deg,red,green);
}效果圖
5.2 徑向漸變
.demo{
width: px;
height: px;
background:radial-gradient(red,green);
}效果圖
說明：漸變默認形狀是橢圓形，但是如果在一個寬度和高度相等的元素內則會變成圓形，但是其實還是橢圓的，只是看到的像圓形，這是因為兩個中心點重合了。
.demo{
width: px;
height: px;
background:radial-gradient(red,green);
}
說明：這不是真的圓形如果寬度和高度不相等則變成橢圓的。
.demo{
width: px;
height: px;
background:radial-gradient(circle,red,green);
}
.demo{
width: px;
height: px;
background:repeating-radial-gradient(circle,red ,green );
}效果圖
.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,可以清楚的觀察到漸變的中心點都是元素的中心點，當時他們的過度點出現了明顯的不同。
.demo{
width: px;
height: px;
background-image: radial-gradient( at top left,red, green);
}效果圖
說明，也可以是 數量單位例如 background-image: radial-gradient( at ,red, green); 我們可以把它理解為一個坐標。 6. 經驗分享
(left,circle,red 10%,yellow 50%,green 50%) left 前面一定要加上 at 不然它的兼容性很不好。
<div class="demo"> <div class="demo-img"></div> </div> 通過在內部新建一個標簽來引用你想插入的圖片，并通過定位來達到想要的效果。
7. 小結漸變屬性因為不兼容 IE8 瀏覽器，所以在使用這個的時候要做好降級處理。例如可以在 IE8 使用純色，或者通過圖片代替，而非 IE8 在使用漸變，這也可以通過 JS 判斷環境。 |
