原來 CSS 漸變也可以只用一個顏色
一、漸變通常至少需要兩個顏色值
通常情況下，漸變至少需要兩個顏色。以linear-gradient線性漸變?yōu)槔?/p>
background: linear-gradient(#FF336F, #FFD75A);示意效果如下：
需要注意的是，即使是「純色」的，也就是兩個顏色都是相同的，也需要都寫上。
background: linear-gradient(#FF336F, #FF336F);示意效果如下：
如果只寫一個顏色，就像這樣。
background: linear-gradient(#FF336F);那么，這條語法將直接不合法。
那么，有沒有辦法只寫一個顏色也能使?jié)u變合法呢？
二、漸變的雙數(shù)值顏色范圍語法
先舉個例子，我們用漸變來實(shí)現(xiàn)一個紅→黃→藍(lán)的條紋圖案。
background: linear-gradient( #FF336F 33%, #FFD75A 33%, #FFD75A 66%, #0170FE 66%);示意效果如下：
大家可能都知道，每個顏色后面的數(shù)值表示顏色斷點(diǎn)的位置，下面是 Figma 中的設(shè)置。
雖然看似只有兩個臨界點(diǎn)，但其實(shí)完整寫下來應(yīng)該是 6 個（包含首尾）。
background: linear-gradient( #FF336F 0%,#FF336F 33%,#FFD75A 33%, #FFD75A 66%, #0170FE 66%, #0170FE 100%)示意效果如下：
但是這樣太復(fù)雜了，同樣的顏色都出現(xiàn)了兩次，因此這里可以采用雙數(shù)值顏色范圍語法（Double-position color stops）進(jìn)行簡化。
簡單來講，就是把相鄰、相同顏色的位置合并成一組范圍。
background: linear-gradient( #FF336F 0% 33%,#FFD75A 33% 66%, #0170FE 66% 100%)然后將首尾的0%和100%也可以省略。
background: linear-gradient( #FF336F 33%,#FFD75A 33% 66%, #0170FE 66%)這里可以看到，33%和66%都出現(xiàn)了兩次，其實(shí)還可以再簡化一下，「后面漸變的起點(diǎn)只要小于前一個漸變的終點(diǎn)，都可以得到邊界清晰的漸變」，因此，還能繼續(xù)簡化。
background: linear-gradient( #FF336F 33%,#FFD75A 0 66%, #0170FE 0)示意效果如下：
怎么樣？是不是看著非常精簡呢
三、純色漸變的簡化
回頭再來看開頭的問題，如何簡化一下純色漸變？
background: linear-gradient(#FF336F, #FF336F);我們可以先補(bǔ)全一下，加上顏色位置。
background: linear-gradient(#FF336F 0, #FF336F 100%);然后，我們可以通過前面的雙數(shù)值顏色范圍語法進(jìn)行合并。
background: linear-gradient(#FF336F 0 100%);因?yàn)橹挥幸粋€顏色，所以這里100%寫成任意值都可以，直接簡化成0。
background: linear-gradient(#FF336F 0 0);這樣就得到了只用一個顏色來表示漸變的最簡寫法（控制臺可以看到，完全是合法的顏色）。
示意效果如下：
是不是比較容易理解呢？
四、純色漸變的用處
有人會問，都已經(jīng)是純色了，為啥不直接用background-color呢？
其實(shí)不然，雖然是純色，但終究是漸變，還有很多是背景色無法做到的事情，比如bakcground-size。
這種圖形就可以直接用「純色漸變」進(jìn)行繪制了，單純的背景色可實(shí)現(xiàn)不了，關(guān)鍵點(diǎn)就是控制background-size，實(shí)現(xiàn)如下：
background: linear-gradient(#999 0 0) 50%/1px 10px no-repeat,/* 1px * 10px */
linear-gradient(#999 0 0) 50%/10px 1px no-repeat;/* 10px * 1px */再舉一個例子，純色漸變還可以用作遮罩合成（mask-composite）中的底色。什么意思呢？比如要實(shí)現(xiàn)這樣一個跟隨鼠標(biāo)的鏤空效果。
由于是反向鏤空的，無法直接用一層遮罩實(shí)現(xiàn)這個效果。更好的辦法就是，使用遮罩合成，用一層完整的背景，減去一個愛心圖層，這樣就得到了一個鏤空的愛心。
這里的背景底色就可以用純色漸變背景來代替，示意代碼如下：
-webkit-mask: url('愛心.svg'), linear-gradient(red 0 0);/*純色漸變背景*/
-webkit-mask-composite: xor; /*只顯示不重合的地方*/
-webkit-mask-position: var(--x) var(--y), 0 0;
-webkit-mask-repeat: no-repeat, repeat;更完整的介紹可以參考這篇文章：CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果（直接跳轉(zhuǎn)公眾號）[2]。
很多正常不好實(shí)現(xiàn)，需要反過來實(shí)現(xiàn)的都可以采取這樣的思路。
當(dāng)然，純色漸變實(shí)際的用處還有很多，這里就不一一舉例了，以往的很多文章中都有運(yùn)用到。
五、兼容性和總結(jié)
漸變的雙數(shù)值顏色范圍語法并不是一開始就有的，這是一個在Chrome 71推出的新特性，至今也有四五年了，完整兼容性如下
如果你不放心，還可以使用 postcss 進(jìn)行兼容一下，下面是一個插件
postcss-double-position-gradients - npm (npmjs.com)[3]
下面總結(jié)一下本文的一些要點(diǎn)：
- 漸變通常至少需要兩個顏色值，即使是純色，也需要兩個顏色都寫上。
- 漸變的雙數(shù)值顏色范圍語法可以把相鄰、相同顏色的位置合并成一組范圍，從而簡化漸變語法。
- 借助漸變的雙數(shù)值顏色范圍語法，可以將純色漸變簡寫成一個顏色。
- 后面漸變的起點(diǎn)只要小于前一個漸變的終點(diǎn)，都可以得到邊界清晰的漸變。
- 純色漸變有很多是背景色無法做到的事情，比如可以改變bakcground-size。
CSS 漸變是 CSS 中最靈活的特性，沒有之一。掌握 CSS 漸變的技巧對提升 CSS 水平有很大的幫助，漸變?nèi)绾螌W(xué)習(xí)？就從最基礎(chǔ)的語法開始吧，比如文中的這些小技巧。
[1]純 CSS 實(shí)現(xiàn)帶連接線的樹形組件： https://juejin.cn/post/7251501860321411130。
[2]CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果： https://juejin.cn/post/7033188994641100831。
[3]postcss-double-position-gradients： https://www.npmjs.com/package/postcss-double-position-gradients。
