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