小探究：CSSの漸變

LiuRhoRamen 發(fā)布于2019-08-29 15:04 / 620人閱讀

摘要：漸變范圍顏色范圍整個的寬度是，是，可以發(fā)現(xiàn)它截止的地方正好是，但是的漸變終點是。漸變過渡區(qū)的占比為總的空間高度或?qū)挾葴p去上下兩個著色塊空間占比剩下的空間。

因為我不喜歡背公式，希望自己能找到比較容易理解和推理的記憶方式吧，很早就感覺CSS3漸變的屬性組成不太好記憶，所以今天終于挖了這個坑，其實也沒什么很特別的，嘻嘻，如果有錯誤歡迎提出。

基本用法

我們一般都是在添加background的時候會用到這個漸變效果，漸變效果分為linear-gradient（線性漸變）和radial-gradient（徑向）。
當(dāng)然這篇文章主要是圍繞linear-gradient展開的。

語法如下：

background: linear-gradient(方向, 顏色1, 顏色2, ...);

因為可以傳入多個顏色，所以這里就是一大串了。
另外還有多個兼容前綴的寫法，語法也有細(xì)微的不同，但是這里就講的是標(biāo)準(zhǔn)形式，也就是沒有前綴的~
示例用法：

linear-gradient(red, blue);
linear-gradient(to right, red , blue);
linear-gradient(180deg, red, blue);
linear-gradient(180deg, red 10%, blue 20%);

關(guān)于方向

方向有兩種寫法，可以是寫top、bottom、left、right，也可以是寫具體的角度。

不寫方向

默認(rèn)情況下是上->下：

background: linear-gradient(red,blue);

使用方向單詞

to 某個方向（目的地）

這里的值可以是單純的top，也可以是如top left（左上）這樣的組合搭配。
Tip：left top搭配中詞語的順序變換也沒有影響。

而它的方向就是以這個目的地為目標(biāo)，徑直發(fā)射過去。
舉例：
向右下角（right bottom / bottom right）發(fā)射過去啦~

background: linear-gradient(to right bottom, red , blue);

使用角度

角度的范圍：
可以是負(fù)數(shù)到正數(shù)！它會進行%360deg的運算，所以0deg和360deg/-360deg是一樣的啦。

角度的判斷：
讓我們先回到不填寫方法的時候，漸變是red(1)->blue(2)，但是在0deg的情況下，漸變方向是blue(2)->red(1)：

background: linear-gradient(0deg , red , blue)

隨后多次實驗會發(fā)現(xiàn)，這個角度其實不像transform那種旋轉(zhuǎn)的角度，同樣也可以認(rèn)為是一個發(fā)射的角度：

所以呀，就可以認(rèn)為是像這張圖一樣的，可以把red作為自己的出發(fā)點，然后對著某個角度發(fā)射過去。
所以在不寫方向的默認(rèn)情況下，linear-gradient(red,blue);這個角度其實相當(dāng)于是linear-gradient(180deg, red,blue)。

關(guān)于百分比

我們在寫顏色的時候后面可以在接一個百分比，這個百分比在MDN中的解釋是：

漸近線的顏色停止點在該位置有特定的顏色。該位置可以被指定為線長度的百分比或一個絕對長度。為實現(xiàn)期望的效果，可以指定任意多個顏色停止點。

說實話，我感覺這個解釋還是比較模糊，我個人覺得這個終點應(yīng)該是漸變的終點，所以我開始了小探究（怕被打擾思維的童鞋直接跳過這里，看最后一段吧（怕被打?）），但同樣還是要存在一個顏色開始的起點，所以來實驗一下：
1.

linear-gradient(to right, red 0%, blue 0%)

因為red設(shè)置了0%為終點，按照計算blue應(yīng)該從0%開始，而blue也同樣設(shè)置0%為漸變終點，所以blue就全部都占滿了，且不存在漸變。

漸變范圍：0%~0%

blue顏色范圍：0%~100%

linear-gradient(to right, red 10%, blue 0%)

整個div的寬度是200px，red是10%，可以發(fā)現(xiàn)它截止的地方正好是200*10%=20px，但是blue的漸變終點是0。想象一下，就好像紅色部分把藍(lán)色的開頭給遮住了，所以這個時候沒有產(chǎn)生漸變，同樣如果blue <= 10%都不會有這個漸變。

漸變范圍：10%~0%（大于起點，所以不存在）

blue顏色范圍：10%~100%

linear-gradient(to right, red 0%, blue 10%)

So，如果blue是10%，按照計算，藍(lán)色應(yīng)該從0%的位置開始，但是漸變的終點是10%，所以會有10%長度的漸變出現(xiàn)。

漸變范圍：0%~10%

blue顏色范圍：0%~100%

4.
來個復(fù)雜的情況：

linear-gradient(to right, red 40%, blue 50%,yellow 60%);

首先紅色部分在40%的時候止步，藍(lán)色的漸變到50%的時候才結(jié)束，所以中間有10%的漸變，同理藍(lán)色和黃色部分也有10%的漸變。

red范圍：0%~50%

red-blue漸變范圍：40%~50%

blue范圍： 50%~50%（漸變范圍給予了它一定的純色區(qū)域）

blue-yellow漸變范圍：50%~60%

yellow顏色范圍：50%~100%

linear-gradient(to right, red 40%, blue 50%,yellow 0%);

把黃色部分設(shè)為0%，也就是黃色漸變在0%的時候就結(jié)束了，這個時候到藍(lán)色部分正好是容器的一半（50%）。

red-blue漸變范圍：40%~50%

blue顏色范圍：50%~50%(因為red-blue漸變而有了一段純色區(qū))

blue-yellow漸變范圍：50%~0%（無效）

yellow顏色范圍：50%~100%

目前看來，這個推理是合理的→_→，當(dāng)然啦這里還只是我的推理（唔）。然后我找到了一篇文章：https://segmentfault.com/a/11...，有詳細(xì)的說明和資料，總結(jié)來說就是：

百分比是指某個顏色值距離起點的開始位置。
漸變過渡區(qū)的占比為總的空間（高度或?qū)挾龋p去上下兩個著色塊空間占比剩下的空間。
如果某個色標(biāo)的位置值比整個列表中在它之前的色標(biāo)的位置值都要小，則該色標(biāo)的位置值會被設(shè)置為它前面所有色標(biāo)位置值的最大值。

這是權(quán)威的說法哦，也很好理解?（今天就自娛自樂到這里吧，嘻嘻）。