原來 CSS 漸變也可以只用一個(gè)顏色

今天小編為大家?guī)淼氖巧鐓^(qū)作者 XboxYan 的文章，讓我們一起來學(xué)習(xí) CSS 漸變的技巧

---

漸變通常至少需要兩個(gè)顏色值

通常情況下，漸變至少需要兩個(gè)顏色。以 linear-gradient 線性漸變?yōu)槔?/span>

   

    
background: linear-gradient(#FF336F, #FFD75A);

   
   

    
   

示意效果如下

需要注意的是，即使是純色的，也就是兩個(gè)顏色都是相同的，也需要都寫上

   

    
background: linear-gradient(#FF336F, #FF336F);

   
   

    
   

示意效果如下

如果只寫一個(gè)顏色，就像這樣

   

    
background: linear-gradient(#FF336F);

   
   

    
   

那么，這條語法將直接不合法

那么，有沒有辦法只寫一個(gè)顏色也能使?jié)u變合法呢？

漸變的雙數(shù)值顏色范圍語法

先舉個(gè)例子，我們用漸變來實(shí)現(xiàn)一個(gè)紅→黃→藍(lán)的條紋圖案

   

    
background: linear-gradient( #FF336F 33%, #FFD75A 33%, #FFD75A 66%, #0170FE 66%);

   
   

    
   

示意效果如下

大家可能都知道，每個(gè)顏色后面的數(shù)值表示顏色斷點(diǎn)的位置，下面是 Figma 中的設(shè)置

雖然看似只有兩個(gè)臨界點(diǎn)，但其實(shí)完整寫下來應(yīng)該是 6 個(gè)（包含首尾）

   

    
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)只要小于前一個(gè)漸變的終點(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)橹挥幸粋€(gè)顏色，所以這里 100% 寫成任意值都可以，直接簡化成 0

   

    
background: linear-gradient(#FF336F 0 0);

   
   

    
   

這樣就得到了只用一個(gè)顏色來表示漸變的最簡寫法（控制臺(tái)可以看到，完全是合法的顏色）

示意效果如下

是不是比較容易理解呢？

純色漸變的用處

有人會(huì)問，都已經(jīng)是純色了，為啥不直接用 background-color 呢？

其實(shí)不然，雖然是純色，但終究是漸變，還有很多是背景色無法做到的事情，比如 bakcground-size。

拿前面一篇文章：純 CSS 實(shí)現(xiàn)帶連接線的樹形組件中的例子來說，繪制一個(gè)加號(hào) ?

這種圖形就可以直接用純色漸變進(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 */

   
   

    
   

再舉一個(gè)例子，純色漸變還可以用作遮罩合成（mask-composite）中的底色。什么意思呢？比如要實(shí)現(xiàn)這樣一個(gè)跟隨鼠標(biāo)的鏤空效果

由于是反向鏤空的，無法直接用一層遮罩實(shí)現(xiàn)這個(gè)效果。更好的辦法就是，使用遮罩合成，用一層完整的背景，減去一個(gè)愛心圖層，這樣就得到了一個(gè)鏤空的愛心。

這里的背景底色就可以用純色漸變背景來代替，示意代碼如下

   

    
-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;

   
   

    
   

很多正常不好實(shí)現(xiàn)，需要反過來實(shí)現(xiàn)的都可以采取這樣的思路。

當(dāng)然，純色漸變實(shí)際的用處還有很多，這里就不一一舉例了，以往的很多文章中都有運(yùn)用到。

五、兼容性和總結(jié)

漸變的雙數(shù)值顏色范圍語法并不是一開始就有的，這是一個(gè)在 Chrome 71 推出的新特性，至今也有四五年了，完整兼容性如下

如果你不放心，還可以使用 postcss 進(jìn)行兼容一下，下面是一個(gè)插件

postcss-double-position-gradients - npm

(https://www.npmjs.com/package/postcss-double-position-gradients)

下面總結(jié)一下本文的一些要點(diǎn)：

1. 漸變通常至少需要兩個(gè)顏色值，即使是純色，也需要兩個(gè)顏色都寫上
2. 漸變的雙數(shù)值顏色范圍語法可以把相鄰、相同顏色的位置合并成一組范圍，從而簡化漸變語法
3. 借助漸變的雙數(shù)值顏色范圍語法，可以將純色漸變簡寫成一個(gè)顏色
4. 后面漸變的起點(diǎn)只要小于前一個(gè)漸變的終點(diǎn)，都可以得到邊界清晰的漸變
5. 純色漸變有很多是背景色無法做到的事情，比如可以改變bakcground-size

CSS 漸變是 CSS 中最靈活的特性，沒有之一。掌握 CSS 漸變的技巧對提升 CSS 水平有很大的幫助，漸變?nèi)绾螌W(xué)習(xí)？就從最基礎(chǔ)的語法開始吧，比如文中的這些小技巧。

---

點(diǎn)擊左下角閱讀原文，到 SegmentFault 思否社區(qū) 和文章作者展開更多互動(dòng)和交流，“公眾號(hào)后臺(tái)“回復(fù)“ 入群 ”即可加入我們的技術(shù)交流群，收獲更多的技術(shù)文章~

- END -

往期推薦

社區(qū)精選｜Spring 中的父子容器是咋回事？

社區(qū)精選｜玩轉(zhuǎn) CSS 基礎(chǔ)：CSS 盒模型

社區(qū)精選｜有了這些方法，webpack你也可以自己配