花里胡哨的背景漸變
背景
設計師的原稿是這樣的漸變：
導出的視覺稿是這樣的：（導出工具沒有識別到漸變）
于是決定去找設計師溝通這個漸變”長什么樣“。當然，設計師并不會像寫 CSS 一樣給你描述漸變，所以作為需要寫出這個漸變的 CSS 的前端，就需要問清楚漸變的一些屬性值，比如漸變方式、漸變點和顏色等，這時就需要重新認識一下 background-image 這個屬性了...
漸變背景
CSS 背景漸變使用 background-image 屬性來實現。實現漸變的常見方式有線性漸變和徑向漸變兩種。例子中屬于橢圓的徑向漸變
徑向漸變
也就是 CSS 函數 radial-gradient()，MDN 中的 radial-gradient 的形式語法如下：
<radial-gradient()> =
radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )- ending-shape：可選，指定徑向漸變的結束形狀。取值可以是 ellipse 或 circle。
- size：可選，指定徑向漸變的大小。可以是具體的大小值，或者關鍵字 closest-side、 farthest-side、 closest-corner、 farthest-corner，表示徑向漸變從形狀的邊緣或角落開始。
- at position：可選，指定徑向漸變的起始位置，可以是具體的像素值或比例值，或者關鍵字 top、 bottom、 left、 right，或者它們的組合形如 top left。
- color-stop-list：色標組，表示徑向漸變的顏色和漸變位置。可以是一個或多個顏色值，以及它們的位置百分比，形如 color stop.
其中中括號表示可選，|| 表示或者，也就是說，<radial-gradient()> 函數可以接收的參數不是必須包含 ending-shape 和 size 兩個屬性，但至少需要指定 color-stop-list。在 color-stop-list
在寬高都為 300px 的 div 中
- 指定色標組：
selector {
// 以紅色（#ff0000）為起始顏色，綠色（#00ff00）為結束顏色的默認大小徑向漸變
// 默認會以 selector 的寬高把漸變的撐滿
background-image: radial-gradient(#ff0000, #00ff00);
}
2. 指定漸變結束形狀 + 色標組：
selector {
// 以紅色（#ff0000）為起始顏色，綠色（#00ff00）為結束顏色的圓形（circle）形狀徑向漸變
// circle 會以 selector 的短邊為漸變直徑
background-image: radial-gradient(circle, #ff0000, #00ff00);
}
selector {
// 以紅色（#ff0000）為起始顏色，綠色（#00ff00）為結束顏色的圓形（ellipse）形狀徑向漸變
// ellipse 也會以 selector 的寬高把漸變的撐滿
background-image: radial-gradient(circle, #ff0000, #00ff00);
}
size + 色標組：
selector {
// 以紅色（#ff0000）為起始顏色，綠色（#00ff00）為結束顏色的橫軸 200px 豎軸 100px 的橢圓形狀徑向漸變
background-image: radial-gradient(200px 100px, #ff0000, #00ff00);
}
size + 位置 + 色標組：
selector {
// 以紅色（#ff0000）為起始顏色，綠色（#00ff00）為結束顏色的橫軸 200px 豎軸 100px 圓心在左上角的橢圓形狀徑向漸變
background-image: radial-gradient(200px 100px at top left, #ff0000, #00ff00);
}
看完上述的幾種操作，不難看出，我們只需要問一下設計師漸變橢圓的長軸短軸、起始位置、開始結束顏色就可以了。
實際生產代碼中已經與設計師溝通去掉了旋轉角度，以左上角為圓心，100rpx 為縱軸，父盒子寬度為橫軸的徑向漸變。
最終代碼和效果圖：
.recently-live {
background-image: radial-gradient(100% 100rpx ellipse at 0 0, #dbeaff, transparent);
}
看到這里就會有同學就要問了（無中生有），不能讓設計師切個圖嗎？
當然可以，不僅省時而且還原效果好。
但是～圖片加載需要時間，就會出現父級盒子閃白的情況，比起處理這個問題我選擇寫CSS
解決了視覺稿的問題，我們再來說說另一個常用的漸變：線性漸變
線性漸變
他的形式語法如下：
linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop-list> )第一個參數代表方向，可以使用關鍵字 top left 等，舉幾個例子：
- 使用關鍵字：to top （從底部到頂部）、to bottom （從頂部到底部）、to left （從右側到左側）、to right （從左側到右側）等。
background-image: linear-gradient(to top, red, blue);- 使用角度值：表示漸變的角度，0 度表示從上到下，逆時針旋轉。
background-image: linear-gradient(45deg, red, blue);- 自定義起始和結束的坐標點：
background0-image: linear-gradient(0% 0%, 100% 100%, red, blue);
background0-image: linear-gradient(0 0, 100px 100px, red, blue);第二個參數代表定義漸變的起始點和終止點以及對應的顏色。
- 簡單使用
background-image: linear-gradient(to top, red, blue);
background-image: linear-gradient(#000000, #ffffff);- 帶位置的顏色位置值是可選的，如果未指定位置值，瀏覽器將自動平均分配顏色停止點。
background-image: linear-gradient(red 0%, blue 20%, green 100%);
background-image: linear-gradient(red 0, blue 300px, green 500px);對于上述常見的線性漸變寫法，我更喜歡第二種顏色位置一起的寫法，漸變一目了然。
我們如果在工作中遇到導出的視覺稿無法對應設計師原稿時，不妨直接從設計師那得到漸變方向、每個顏色對的起點終點和色值
比如從左到右，從最左邊到中點為紅到藍，再到最右邊為綠，得出代碼：
background-image: linear-gradient(to right, red 0, blue 50%, green 100%);
除此之外，讓我們再來看看不常用但很有意思的重復漸變和圓錐漸變
圓錐漸變
圓錐漸變簡單理解就是以一個圓心為旋轉點的順時針漸變。用它可以實現一些非常有意思的效果
他的語法跟徑向漸變類似，直接舉幾個例子好了：
- 煙囪濃煙污染天空
background: conic-gradient(from 0.5turn at 10% 50%, crimson, cyan);
這個表示旋轉 0.5 圈后的，從緋紅到青色的一個漸變，模擬了一個煙囪濃煙污染天空的效果。
- 高空跳板
background-image: conic-gradient(from 0.25turn at 80% 30%, orange, 10deg, cadetblue, 350deg, #fff);
from 關鍵字后面跟上旋轉角度 0.25turn 表示轉四分之一，也就是 360 / 4 = 90deg ，你也可以寫 90deg、 1.57rad，位置可選，at 關鍵字后跟上旋轉圓心坐標，后面的顏色表示從 orange 漸變到 cadetblue，然后再漸變到白色。漸變的角度從起始位置開始，先是 10 度切換到藍色，然后再以 350 度的角度切換到白色。
怎么樣，右上角那一縷陽光照射著的三寸小木板，是不是很有意思。
重復漸變
重復線性漸變 repeating-linear-gradient 和重復徑向漸變 repeating-radial-gradient 以及重復圓錐漸變 repeating-conic-gradient
他們的用法跟普通的線性漸變和徑向漸變一樣，唯一的不同時，如果漸變無法撐滿就會重復到撐滿為止
來看一下對比：
- 0 到 10% 的紅色到藍色的向下漸變，左邊是普通線性漸變，右邊是重復漸變漸變
background-image: repeating-linear-gradient(blue 0, black 10%);
我們不難看出，普通線性漸變無法撐滿時，會以最后一個漸變色一直延伸到末端，而重復線性漸變會重復到末端
看到右邊這張圖讓我想起了我們的刻板印象：程序員格子衫...
- 0 到 30deg 的普通圓錐漸變和重復圓錐漸變的對比
background-image: repeating-conic-gradient(red, yellow 30deg);
右邊這個重復圓錐漸變如果旋轉起來是不是可以模仿一個勝利的效果呢～
- 0 到 8% 的藍色到黑色的重復徑向漸變重復徑向漸變也是一樣的，當漸變的橫縱軸小于父盒子的寬高時，就會重復
background-image: repeating-radial-gradient(blue 0, black 8%);
看到這里，我想到一個好玩的：我們動態改變結束色值的位置，會是什么樣的效果呢？
比如把 black 8% 在 1s 里變為 20% ，再在 1s 里回到 8%...效果比較“眩暈”，就不放圖給大家了，大家可以自行嘗試下～
總結
本文僅針對一些比較常用的背景漸變和常見寫法進行了梳理，不涉及到美觀和設計理念，對于喜歡 CSS 的同學，可以嘗試用漸變寫出更多好看有意思的效果，歡迎一起討論一下。
