徑向漸變
漸變是兩種或多種顏色之間的過渡，線性漸變是多種顏色沿着一條直線（漸變線）過渡，漸變的實現由漸變線和色標兩部分組成，漸變線控制漸變的方向；色標控制漸變的顏色變化，色標包括顏色和位置。瀏覽器從每個色標的位置淡出到下一個位置，通過確定多個色標的位置可以制作多色漸變效果。
語法：linear-gradient([[<angle> | to <side-or-corner>],]? <color-stop>[, <color-stop>]+)
示例效果
漸變線
漸變線從漸變框的中心向兩個方向進行拓展，起點和終點是漸變線與經過經過漸變框的一個角的垂直線的相交點。
漸變線第一個參數指定漸變方向，默認值to bottom，指定漸變的兩種方法：
1.使用角度。0deg表示沿着元素中心軸由下向上漸變（y軸），正值順時針旋轉，負值逆時針旋轉。
2.使用關鍵字。關鍵字是角度的特殊表現形式。
to top -> odeg
to right -> 90deg
to bottom -> 180deg
to left -> -90deg (或270deg)
to top left -> -45deg (或315deg)
to top right -> 45deg
to bottom left -> -135deg (或225deg)
to bottom right -> 135deg
例1演示了默認效果，例2演示了to right效果
色標
色標沒有默認值，至少要設置兩個色標才會有漸變效果，色標中的顏色值可以是任何一種顏色模式，位置可以是百分比或數值（可以是負值）。
色標的注意事項：
- 顏色在前，位置在后
background-image: linear-gradient(red 0%, green 100%);
- 位置可省略，瀏覽器把第一個顏色位置設置為0%，最后一個顏色位置設置為100%。
background-image: linear-gradient(red 0%, green 100%);
// 等價於
background-image: linear-gradient(red, green);
- 若漸變只有兩種顏色，並且第一個顏色值設置為n%， 第二個顏色值設置為m%，那么瀏覽器會將0%-n%范圍內設置為第一種純色，n%-m%范圍內設置為第一種顏色到第二種顏色的漸變色，m%-100%范圍內設置為第二種顏色的純色。
background-image: linear-gradient(red 30%, green 60%);
// 等價於
backgrounf-image: linear-gradient(red 0%, red 30%, green 60%, green 100%);
例3演示了效果
- 漸變沒有指定位置，則漸變均勻分布
background-image: linear-gradient(red, yellow, green, blue);
// 約等價於
background-image: linear-gradient(red 0%, yellow 33.333%, green 66.666%, blue 100%);
例4演示了效果
- 若同一個位置設置同一種顏色，例如a、b、c三色都占據在同一位置，那么0%-n%為前一種顏色與a色發生漸變，n%-100%為c顏色與后一種顏色發生漸變，而n%-n%為a色與c色的顏色突變，中間的b色是沒有用的。
background-image: linear-gradient(red, yellow 50%, green 50%, blue 50%, black);
// 等價於
background-image: linear-gradient(red, yellow 50%, blue 50%, black);
例5演示了效果
重復漸變(repeating-linear-gradient)
像背景圖片一樣，漸變也是可以重復的，重復漸變使色標在漸變線上無限重復。注意只有當首尾的顏色位置不是0%或100%時，重復漸變才有效，因為首尾顏色都被占去了就沒有可以復制的位置了。
例6演示了效果
紙張效果
<style>
.t7 {
width: 200px;
height: 150px;
background-image: repeating-linear-gradient(#f3f3f3, #f3f3f3 18%, #ccc 19%);
}
.t7 p {
font-size: 16px;
line-height: 1.8;
}
</style>
<div class=" t7">
<p>我是一段文本我是一段文本我是一段文本我是一段文本</p>
</div>
我是一段文本我是一段文本我是一段文本我是一段文本
結語
在CSS樣式中，漸變相當於背景圖片，所以理論上可以在任何試用url()值的地方使用，但是只有background-image在各瀏覽器中得到了廣泛支持。