小探究：CSSの漸變

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

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

因?yàn)槲也幌矚g背公式，希望自己能找到比較容易理解和推理的記憶方式吧，很早就感覺(jué)CSS3漸變的屬性組成不太好記憶，所以今天終于挖了這個(gè)坑，其實(shí)也沒(méi)什么很特別的，嘻嘻，如果有錯(cuò)誤歡迎提出。

基本用法

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

語(yǔ)法如下：

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

因?yàn)榭梢詡魅攵鄠€(gè)顏色，所以這里就是一大串了。
另外還有多個(gè)兼容前綴的寫(xiě)法，語(yǔ)法也有細(xì)微的不同，但是這里就講的是標(biāo)準(zhǔn)形式，也就是沒(méi)有前綴的~
示例用法：

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

關(guān)于方向

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

不寫(xiě)方向

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

background: linear-gradient(red,blue);

使用方向單詞

to 某個(gè)方向（目的地）

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

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

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

使用角度

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

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

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

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

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

關(guān)于百分比

我們?cè)趯?xiě)顏色的時(shí)候后面可以在接一個(gè)百分比，這個(gè)百分比在MDN中的解釋是：

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

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

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

因?yàn)閞ed設(shè)置了0%為終點(diǎn)，按照計(jì)算blue應(yīng)該從0%開(kāi)始，而blue也同樣設(shè)置0%為漸變終點(diǎn)，所以blue就全部都占滿了，且不存在漸變。

漸變范圍：0%~0%

blue顏色范圍：0%~100%

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

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

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

blue顏色范圍：10%~100%

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

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

漸變范圍：0%~10%

blue顏色范圍：0%~100%

4.
來(lái)個(gè)復(fù)雜的情況：

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

首先紅色部分在40%的時(shí)候止步，藍(lán)色的漸變到50%的時(shí)候才結(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%，也就是黃色漸變?cè)?%的時(shí)候就結(jié)束了，這個(gè)時(shí)候到藍(lán)色部分正好是容器的一半（50%）。

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

blue顏色范圍：50%~50%(因?yàn)閞ed-blue漸變而有了一段純色區(qū))

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

yellow顏色范圍：50%~100%

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

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

這是權(quán)威的說(shuō)法哦，也很好理解?（今天就自?shī)首詷?lè)到這里吧，嘻嘻）。