關於漸變
時下，漸變（gradient）效果在頁面設計中已經變得越來越常見了。而且現在的CSS3對於漸變的支援也已經足夠的豐富了。雖然我們可能使用過CSS3中的line-gradient屬性或radial-gradient屬性，但其實CSS3中的漸變功能比我們想象的要強大的多，加以利用會實現很多有趣好玩的東西。本文就來討論CSS3中的漸變。
taobao首頁的按鈕和導航欄都使用了css漸變基礎語法
如果你之前使用過CSS3的漸變，對於下面的CSS程式碼一定有所瞭解：
<
div class="gradient_bg">
<
/div>
<
style>
.gradient_bg {
background-image: linear-gradient(gold, #FF837E);
height: 84px;
width: 100%;
}<
/style>
複製程式碼他的執行結果如下：
這是一個由上到下、由金色到粉色的漸變色塊linear-gradient()方法的語法看上去還是很清晰的——從某個顏色漸變到另一個顏色。
但是如果要實現下面的幾種漸變效果該如何做呢？
這個是由左到右漸變的色塊，並且漸變過程只發生在中間一小部分內這個是由中心向外漸變的色塊這是一個類似“桌布”的div，他也是利用漸變來實現的。。。我們先來看看linear-gradient的完整語法：
linear-gradient( [ <
angle>
| to <
side-or-corner>
,]? <
color-stop>
[, <
color-stop>
]+ ) \---------------------------------/ \----------------------------/ Definition of the gradient line List of color stops 複製程式碼在CSS語法的說明中，尖括號括起來的部分代表資料型別，如<
angle>
代表角度資料型別，<
image>
資料型別。關於更多的資料型別，可以檢視MDN的文件
解釋一下：
<
angle>
| to <
side-or-corner>
這個在上面的程式碼示例中並沒有使用，它是用來描述漸變發生的方向或角度的。未指定時，預設是由上至下進行漸變。
- <
angle>
：代表的是漸變發生的方向或角度。角度向順時針增加。取值如：45deg、-120deg等等。其中角度是指相對縱座標而形成的角度。
關於角度單位不僅只有deg，還有grad和turn，比如順時針旋轉90°的話，下面三種是同樣 的效果，90deg、100grad、.25turn。再比如順時針旋轉一週的話（360°），下面三種也是同樣的效果，360deg、400grad、1turn
此圖解釋了漸變角度的計算方式- <
side-or-corner>
：直譯成中文是“邊或角”，也就是說這個值表明了漸變指向哪個邊或哪個角。他的取值由一個或兩個關鍵字組成，包括垂直關鍵字（top和bottom）和水平關鍵字（left和right），如：to left ；to left top等等。下面是用藍色向黃色漸變的示例來表示方向值所對應的效果:
通過以上對於linear-gradient的解釋，讓我們重新考慮一下上面提到的色塊如何實現。
這個是由左到右漸變的色塊，並且漸變過程只發生在中間一小部分內根據描述，我們可以知道下面的資訊：
- 漸變方向：由左向右（當然你也可以逆向思維，變成由右向左）
- 漸變位置：漸變是發生在中間的一小部分，我們可以估算為整個區間的20%
所以程式碼可以寫成下面的樣子：
div {
background-image: linear-gradient(to right, gold 40%, #FF837E 60%);
}複製程式碼至此，我們已經研究的漸變都是基於直線方向上的漸變。然而在實際應用場景中，還有CSS為<
gradient>
提供的功能都遠遠超過這個範疇。
實際情況是，CSS漸變可分為三大類：
- 線性漸變
- 徑向漸變
- 重複漸變
此圖解釋了各類漸變的表象接下來，來說一說其他幾類漸變
徑向漸變
徑向漸變的語法：
radial-gradient( [ [ circle || <
length>
] [ at <
position>
]? , | [ ellipse || [ <
length>
| <
percentage>
]{2
} ] [ at <
position>
]? , | [ [ circle | ellipse ] || <
extent-keyword>
] [ at <
position>
]? , | at <
position>
, ]? <
color-stop>
[ , <
color-stop>
]+)複製程式碼語法說明看上去很難懂，可以簡化一下：
radial-gradient(shape size position, color-stop[...,color-stop]);
複製程式碼從簡化後的說明中可以看出，radial-gradient()方法包含兩組引數，第一組描述的徑向漸變特有的資訊，第二組引數與線形漸變一樣，描述的是顏色漸變的規則。
- position：代表徑向漸變的圓心位置，語法和線形漸變中的side-or-corner語法很像，同樣支援關鍵字，也支援距離左上角的座標位置（包括px和百分比單位等）。預設值是中心點。
- shape：指明徑向漸變的形狀，可以為
circle或者ellipse，從字面意思可知，circle表示圓形，ellipse表示橢圓形。預設為ellipse。 - size：代表徑向漸變範圍的半徑大小，當shape為ellipse時，size需要指定兩個值，如：20% 30%；其中第一個值 20%代表相對於元素寬度的20%，而30%代表相對於元素高度的30%。size還可以用一些關鍵字來進行描述；如下圖（知乎怎麼插入表格啊？）
- color-stop：與線形漸變一致，這裡不再贅述。
需要注意的是，當shape取值為circle時，size不能設定為百分數。
舉幾個例子，來加強記憶。
.radial_1 {
/*最簡單的漸變：由中心到四周，由藍色到黃色*/ background-image: radial-gradient(blue, yellow);
} .radial_2 {
/*半橢圓形漸變：由左側中心點到四周，有藍色到黃色*/ background-image: radial-gradient(ellipse 100% 50% at left center, blue, yellow);
} .radial_3 {
/*左上角到右下角的發散式漸變*/ background-image: radial-gradient(circle farthest-corner at left top, blue, yellow);
} .radial_4 {
/*指定顏色漸變範圍*/ background-image: radial-gradient(ellipse 50% 30%, blue 30%, yellow 70%);
}複製程式碼重複漸變
重複漸變分為兩種：線形重複漸變和徑向重複漸變。
其中的線形重複漸變——repeating-linear-gradient()的語法如下：
repeating-linear-gradient( [ <
angle>
| to <
side-or-corner>
,]? <
color-stop>
[, <
color-stop>
]+ ) \---------------------------------/ \----------------------------/ Definition of the gradient line List of color stops 複製程式碼徑向重複漸變的語法如下：
repeating-radial-gradient( [[ circle || <
length>
] [at <
position>
]? , | [ ellipse || [<
length>
| <
percentage>
]{2
}] [at <
position>
]? , | [[ circle | ellipse ] || <
extent-keyword>
] [at <
position>
]? , | at <
position>
, <
color-stop>
[ , <
color-stop>
]+ ) \---------------------------------------------------------------/\--------------------------------/ Contour, size and position of the ending shape List of color stops 複製程式碼聰明的你一定發現了，這兩個的語法與非重複的語法是一模一樣的。本篇不準備著重講解重複漸變，如果今後有時間會為大家進行詳細講解。
其他知識點
說過了語法，接下來解釋一下其他的一些概念。
突然變色
“如果多個色標具有相同的位置，他們會產生一個無限小的過渡區域，過渡的起止色分別是第一個和最後一個指定值。從效果上看，顏色會在那個位置突然變化，而不是一個平滑的漸變過程。”
——CSS影像（第三版）（w3.org/TR/css3-ima…
要想實現上面的效果，程式碼可以寫成下面的樣子：
div {
background-image: linear-gradient(to right, blue 50%, yellow 50%);
}複製程式碼但是你會發現為了實現這種“突然變色”的效果，每次修改尺寸時你都需要修改兩處（上面的兩個50%）。不過好在CSS的規範中有下面的規定：
“如果某個色標的位置值比整個列表中在它之前的色標的位置都要小，則該色標的位置會被設定為它前面所有色標位置值的最大值。”
——CSS影像（第三版）（w3.org/TR/css3-ima…
所以，我們可以將第二個色標的位置值設定為0，那麼第二個色值的起始位置永遠是第一個色值的結束位置。加大了程式碼的可維護性。
div {
background-image: linear-gradient(to right, blue 50%, yellow 0);
}複製程式碼<
gradient>
資料型別
上面我們說的三種漸變都屬於CSS資料型別中的<
gradient>
型別，而<
gradient>
資料型別又是<
image>
資料型別的子型別。所以有時能應用到<
image>
的地方同樣也可以應用到<
gradient>
，比如我們可以利用border-image屬性來實現邊框的漸變。如下面的效果：
.border_gradient {
border: 10px solid transparent;
border-image: linear-gradient(to right, blue, yellow) 10;
}複製程式碼篇幅有限，這裡就不對border-image屬性進行展開了。
多層級背景
background-image是允許繪製多個背景影像的，他們按照Z軸方向進行堆疊式的擺放，最先指定的影像在最上層。那麼基於這個特性，我們可以繪製出很多複雜好玩的效果出來，最先想到的就是網格效果。
.grid {
background-color: white;
background-image: linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 0), linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 0);
/*這裡使用rgba，使顏色的透明度為50%*/ background-size: 50px 50px;
}複製程式碼其實“桌布效果”是由橫豎兩個線形漸變混合，再加上background-color形成的。
上面為橫向漸變，下面為縱向了漸變更多好玩的漸變：
下面推薦兩個利用CSS漸變實現的網站，上面有各種有趣好玩的實踐例子。
謝謝支援：
如果您覺得這篇文章對於您有幫助，請關注微信公眾號——“較真的前端”。
這裡有更多更好玩的前端知識分享。