原來 CSS 漸變也可以只用一個顏色

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

---

漸變通常至少需要兩個顏色值

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

   

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

   
   

    
   

示意效果如下

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

   

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

   
   

    
   

示意效果如下

如果只寫一個顏色，就像這樣

   

    
background: linear-gradient(#FF336F);

   
   

    
   

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

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

漸變的雙數值顏色范圍語法

先舉個例子，我們用漸變來實現一個紅→黃→藍的條紋圖案

   

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

   
   

    
   

示意效果如下

大家可能都知道，每個顏色后面的數值表示顏色斷點的位置，下面是 Figma 中的設置

雖然看似只有兩個臨界點，但其實完整寫下來應該是 6 個（包含首尾）

   

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

   
   

    
   

示意效果如下

但是這樣太復雜了，同樣的顏色都出現了兩次，因此這里可以采用雙數值顏色范圍語法（Double-position color stops）進行簡化。

簡單來講，就是把相鄰、相同顏色的位置合并成一組范圍

   

    
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% 都出現了兩次，其實還可以再簡化一下，后面漸變的起點只要小于前一個漸變的終點，都可以得到邊界清晰的漸變，因此，還能繼續(xù)簡化

   

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

   
   

    
   

示意效果如下

怎么樣？是不是看著非常精簡呢

純色漸變的簡化

回頭再來看開頭的問題，如何簡化一下純色漸變？

   

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

   
   

    
   

我們可以先補全一下，加上顏色位置

   

    
background: linear-gradient(#FF336F 0, #FF336F 100%);

   
   

    
   

然后，我們可以通過前面的雙數值顏色范圍語法進行合并

   

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

   
   

    
   

因為只有一個顏色，所以這里 100% 寫成任意值都可以，直接簡化成 0

   

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

   
   

    
   

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

示意效果如下

是不是比較容易理解呢？

純色漸變的用處

有人會問，都已經是純色了，為啥不直接用 background-color 呢？

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

拿前面一篇文章：純 CSS 實現帶連接線的樹形組件中的例子來說，繪制一個加號 ?

這種圖形就可以直接用純色漸變進行繪制了，單純的背景色可實現不了，關鍵點就是控制 background-size，實現如下

   

    
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）中的底色。什么意思呢？比如要實現這樣一個跟隨鼠標的鏤空效果

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

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

   

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

   
   

    
   

很多正常不好實現，需要反過來實現的都可以采取這樣的思路。

當然，純色漸變實際的用處還有很多，這里就不一一舉例了，以往的很多文章中都有運用到。

五、兼容性和總結

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

如果你不放心，還可以使用 postcss 進行兼容一下，下面是一個插件

postcss-double-position-gradients - npm

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

下面總結一下本文的一些要點：

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

CSS 漸變是 CSS 中最靈活的特性，沒有之一。掌握 CSS 漸變的技巧對提升 CSS 水平有很大的幫助，漸變如何學習？就從最基礎的語法開始吧，比如文中的這些小技巧。

---

點擊左下角閱讀原文，到 SegmentFault 思否社區(qū) 和文章作者展開更多互動和交流，“公眾號后臺“回復“ 入群 ”即可加入我們的技術交流群，收獲更多的技術文章~

- END -

往期推薦

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

社區(qū)精選｜玩轉 CSS 基礎：CSS 盒模型

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