探索CSS屬性*-gradient的實用價值

本文爲做者行舟客投稿，原文地址：

https://yunxiaomeng.blog.csdn.net/article/details/108784246

 歡迎點贊！

先介紹一下一個有趣的屬性 —— conic-gradient

圓錐漸變！

對其感興趣是由於我發現它居然能夠用來作圓餅圖！好比這樣的：這樣的：其原理也很簡單：就是以起始點爲中心，而後以順時針方向繞中心實現漸變效果。其必須接收多種顏色值參數，每一個顏色值後能夠跟兩個百分比，爲當前顏色值的起始點和終止點（中間用空格隔開）：

圓錐漸變原理圖

background: conic-gradient(pink 0 30%, yellow 0 70%, lime 0 100%);

還能夠分開來寫：

background: conic-gradient(pink 0, pink 30%, yellow 30%, yellow 70%, lime 70%, lime 100%);

（第二種方式兼容性比第一種好一點）

慢着！上面第二張圖片不就是咱們想要的嗎？根據圖片，咱們不可貴出下面的代碼：

{
    width: 200px;
    height: 200px;
    background: conic-gradient(deeppink 0, deeppink 30%, yellowgreen 30%, yellowgreen 70%, teal 70%, teal 100%);
    border-radius: 50%;
}

But，這裏面徹底是「靜態」的。

咱們大概大部分人都用過echarts繪製圖形：根據後端傳來的數據渲染到echarts的Map對象的指定參數（數組）中就能獲得一個符合要求的不一樣顏色顯示的圓餅圖了。這用CSS怎麼作呢？

咱們固然要藉助JS的幫助 —— 由於CSS3推出了 自定義變量 ，它能夠很好的讓css屬性與JavaScript變量相結合：通過探索，目前比較好的實踐應該就是給gradient的顏色開始與結束位置設置爲自定義變量，而後當JavaScript拿到數據後經過改變其值從而改變圓餅圖中的顏色分佈！

放一個之前寫過的演示demo：

:root{
 --zero:0;
 --one:50%;
}
.circle{
 width: 300px;
 height: 300px;
 border-radius: 50%;
 /* background: conic-gradient(red, yellow, lime, aqua, blue, fuchsia, red); */
 background: conic-gradient(red var(--zero) var(--one),yellow var(--one) 100%);
}

<div class="circle"></div>
<button id="but">點我改變圓餅圖分佈</button>
<script>
 but.onclick=function(){
  document.documentElement.style.setProperty('--zero', '10%');
  document.documentElement.style.setProperty('--one', '70%');
 }
</script>

若是要動態增長顏色值（好比新增調查對象），能夠動態修改style中的屬性：

xxx.style.xxx="xxx";   //改變

這要比用「::after僞元素」實現起來方便多了！

僞元素的方式可能不少人也玩過：利用transform的rotate屬性將一個content盒子旋轉並顯示部分以達到目的。

還有不少「騷操做」網上應該一搜一堆，這裏就再也不贅述了（：相比於前兩年瀏覽器對此屬性的「不聞不問」到如今的部分支持，也是很大進步了，讓咱們繼續期待吧）

---

關於 linear-gradient

這個屬性除了在一些網站上用做某個元素的背景之外，彷佛並無什麼值得關注的地方：好比 條紋背景「若是多個色標具備相同的位置，它們會產生一個無限小的過渡區域， 過渡的起止色分別是第一個和最後一個指定值。從效果上看，顏色會在那 個位置忽然變化，而不是一個平滑的漸變過程。」 由於漸變是一種由代碼生成的圖像，咱們能像對待其餘任何背景圖像那樣對待它，並且還能夠經過 background-size 來調整其尺寸；而且因爲背景在默認狀況下是重複平鋪的，整個容器其實已經被填滿了水平條紋：

background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;

垂直條紋垂直條紋的代碼跟水平條紋幾乎是同樣的，差異主要在於：咱們須要在 開頭加上一個額外的參數來指定漸變的方向。在水平條紋的代碼中，咱們其 實也能夠加上這個參數，只不過它的默認值 to bottom 原本就跟咱們的意 圖一致，因而就省略了。最後，咱們還須要把 background-size 的值顛倒 一下：

background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 30px 100%;

須要注意的是：linear-gradient若是加了第一個參數，則其默認方向就會變爲「從下向上」的，爲此，筆者還向菜鳥教程投過郵件建議他們在文檔中修改措辭。

linear2

傾斜條紋「傳統的」僅僅改變linear-gradient第一個參數——角度值的方式或者經過background-size增長「精確度」的方式都不能有效的達到真正意義上完美的傾斜背景：它們老是會在大小改變或者換一個傾斜度時把整個圖案搞亂！幸運的是，咱們還有更好的方法來建立斜向條紋：一個不爲人知的真相是 linear-gradient() 和 radial-gradient() 還各有一個循環式的增強版：repeating-linear-gradient() 和 repeating-radial-gradient()。它們的工做方式跟前二者相似，只有一點不一樣：色標是無限循環重複的，直 到填滿整個背景！

background: repeating-linear-gradient(45deg, #fb3, #58a 30px);

哦，對了，同上面同樣，全部的「-gradient」屬性在沒有限制起始位置和終止位置時都會有「漸變光暈」，若是咱們改成下面這樣：

background: repeating-linear-gradient(60deg, #fb3 0 15px, #58a 0 30px);

linear4

看到這張圖你有沒有想到一個著名的案例——三角形？

background: #eee;
background-image: linear-gradient(45deg, transparent 75%, #bbb 0);

而咱們之前用CSS通常是像這樣寫的：

width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: black ;

其實，linear-gradient用處還遠遠不止這些...

---

2020-10-17更新

radial-gradient及總體應用

咱們大概都知道：滾動條是一種常見的界面控件，用來提示一個元素除了能夠看到的內容以外，還包含了更多內容。可是，它每每太過笨重，在視覺上喧賓奪主，所以現代操做系統已經開始簡化它的外觀，當用戶不與可滾動的元素交互時，滾動條就會被徹底隱藏。目前已知的「去除滾動條」的方法中，最經常使用的有：::-webkit-scrollbar{display:none;} ，可是很顯然，IE上沒法使用 —— 它只容許改變滾動塊的顏色。

在CSS3的時代，咱們能夠在想要加滾動條的地方外包裹一層div，爲其設置overflow:hidden，內部用calc()函數動態計算width使其溢出！這能夠有效解決IE下兼容性問題。

咱們如今已經不多經過滾動條來滾動頁面了（更多的是使用觸摸手勢），但滾動條對於元素內容可滾動的提示做用仍然是十分有用的，哪怕對於那些沒有發生交互的元素也是如此；並且這種提示方式十分巧妙。聽說曾經 Google 推出了一款 RSS 閱讀器（已經沒了），它的用戶體驗設計師找到了一種很是優雅的方式來做出相似的提示：當側邊欄的容器還有更多內容時，一層淡淡的陰影會出如今容器的頂部和底部。就像這樣：

讓咱們首先從一段簡單的結構代碼開始，一個帶有示意性內容的普通無序列表：

<ul>
 <li>Ada Catlace</li>
 <li>Alan Purring</li>
 <li>Schrödingcat</li>
 <li>Tim Purrners-Lee</li>
 <li>WebKitty</li>
 <li>Json</li>
 <li>Void</li>
 <li>Neko</li>
 <li>NaN</li>
 <li>Cat5</li>
 <li>Vector</li>
 <li>Ada Catlace</li>
 <li>Alan Purring</li>
 <li>Schrödingcat</li>
 <li>Tim Purrners-Lee</li>
 <li>WebKitty</li>
 <li>Json</li>
 <li>Void</li>
 <li>Neko</li>
 <li>NaN</li>
 <li>Cat5</li>
 <li>Vector</li>
 <li>Ada Catlace</li>
 <li>Alan Purring</li>
 <li>Schrödingcat</li>
 <li>Tim Purrners-Lee</li>
 <li>WebKitty</li>
 <li>Json</li>
 <li>Void</li>
 <li>Neko</li>
 <li>NaN</li>
 <li>Cat5</li>
 <li>Vector</li>
 <li>Ada Catlace</li>
 <li>Alan Purring</li>
 <li>Schrödingcat</li>
 <li>Tim Purrners-Lee</li>
 <li>WebKitty</li>
 <li>Json</li>
 <li>Void</li>
 <li>Neko</li>
 <li>NaN</li>
 <li>Cat5</li>
 <li>Vector</li>
</ul>

咱們能夠給 <ul> 元素設置一些基本的樣式，讓它的高度略短於內容，從而讓其內容能夠滾動：

overflow: auto;
width: 10em;
height: 8em;
padding: .3em .5em;
border: 1px solid silver;

接下來，有趣的事情即將發生。咱們用一個徑向漸變在頂部添加一條陰影：

background: radial-gradient(at top, rgba(0,0,0,.2),transparent 70%) no-repeat;
background-size: 100% 15px;

如今，當咱們滾動列表時，這條陰影會一直停留在相同的位置。這正是背景圖像的默認行爲：它的位置是相對於元素固定的！不論元素的內容是否發生了滾動。這一點也適用於 background-attachment: fixed 的背景圖像。它們惟一的區別是，當頁面滾動時，後者是相對於視口固定的。有沒有辦法讓背景圖像跟着元素的內容一塊兒滾動呢？

如今常見的值只有inherit、scroll、fixed，可是從W3C文檔中能夠看到：後來爲background-attachment 屬性增長了一個新的關鍵字，叫作 local ！若是將此屬性應用到這條陰影上，它會帶給咱們正好相反的效果：當咱們滾動到最頂端時，能看到一條陰影；但當咱們向下滾動時，這條陰影就消失了。

但這不重要，咱們的思路對了！

我想到了一個很經常使用的hack：咱們須要兩層背景：一層用來生成那條陰影，另外一層基本上就是一個用來遮擋陰影的白色矩形，其做用相似於遮罩層。生成陰影的那層背景將具備默認的 background-attachment 值（scroll），由於咱們但願它老是保持在原位。咱們把遮罩背景的 background-attachment 屬性設置爲 local，這樣它就會在咱們滾動到最頂部時蓋住陰影，在向下滾動時跟着滾動，從而露出陰影。

background: linear-gradient(white 30%, transparent),
    radial-gradient(at 50% 0, rgba(0,0,0,.2),transparent 70%);
background-repeat: no-repeat;
background-size: 100% 50px, 100% 15px;
background-attachment: local, scroll;

沒錯，這就是linear-gradient的另外一個應用 —— 漸變遮罩層！

可是如今咱們會發現：如今只有上邊有，下邊怎麼搞？這就須要用到css中的「簡寫」以及對*-gradient的理解了：若是不加第一個參數（不指明方向），則默認是從上到下漸變的，可是若是加了第一個參數可是沒有指明to bottom或100%，那麼它默認是從下向上漸變的！

background: linear-gradient(white 30%, transparent) top / 100% 50px,
 radial-gradient(at 50% 0, rgba(0,0,0,.2),transparent 72%) top / 100% 15px,
 linear-gradient(to top, white 15px, hsla(0,0%,100%,0)) bottom / 100% 50px,
  radial-gradient(at bottom, rgba(0,0,0,.2), transparent 72%) bottom / 100% 15px;
background-repeat: no-repeat;
background-attachment: local, scroll,local, scroll;

最後

• 歡迎加我微信(winty230)，拉你進技術羣，長期交流學習...
  

• 歡迎關注「前端Q」,認真學前端，作個專業的技術人...