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

圓錐漸變！

對其感興趣是因為我發(fā)現(xiàn)它竟然可以用來做圓餅圖！
比如這樣的：
 

這樣的：

其原理也很簡單：就是以起始點為中心，然后以順時針方向繞中心實現(xiàn)漸變效果。其必須接收多種顏色值參數(shù)，每個顏色值后可以跟兩個百分比，為當(dāng)前顏色值的起始點和終止點（中間用空格隔開）：

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

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

慢著！上面第二張圖片不就是我們想要的嗎？
根據(jù)圖片，我們不難得出下面的代碼：

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

But，這里面完全是“靜態(tài)”的。

我們大概大部分人都用過echarts繪制圖形：根據(jù)后端傳來的數(shù)據(jù)渲染到echarts的Map對象的指定參數(shù)（數(shù)組）中就能得到一個符合要求的不同顏色顯示的圓餅圖了。這用CSS怎么做呢？

我們當(dāng)然要借助JS的幫助 —— 因為CSS3推出了 自定義變量 ，它可以很好的讓css屬性與JavaScript變量相結(jié)合：
經(jīng)過探索，目前比較好的實踐應(yīng)該就是給gradient的顏色開始與結(jié)束位置設(shè)置為自定義變量，然后當(dāng)JavaScript拿到數(shù)據(jù)后通過改變其值從而改變圓餅圖中的顏色分布！

放一個以前寫過的演示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>

如果要動態(tài)增加顏色值（比如新增調(diào)查對象），可以動態(tài)修改style中的屬性：

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

這要比用“::after偽元素”實現(xiàn)起來方便多了！

偽元素的方式可能很多人也玩過：利用transform的rotate屬性將一個content盒子旋轉(zhuǎn)并顯示部分以達(dá)到目的。

還有很多“騷操作”網(wǎng)上應(yīng)該一搜一堆，這里就不再贅述了（：相比于前兩年瀏覽器對此屬性的“漠不關(guān)心”到現(xiàn)在的部分支持，也是很大進(jìn)步了，讓我們繼續(xù)期待吧）

關(guān)于 linear-gradient

這個屬性除了在一些網(wǎng)站上用作某個元素的背景以外，似乎并沒有什么值得關(guān)注的地方：
比如 條紋背景
“如果多個色標(biāo)具有相同的位置，它們會產(chǎn)生一個無限小的過渡區(qū)域，
過渡的起止色分別是第一個和最后一個指定值。從效果上看，顏色會在那
個位置突然變化，而不是一個平滑的漸變過程。”
因為漸變是一種由代碼生成的圖像，我們能像對待其他任何背景圖像那樣對待它，而且還可以通過 background-size 來調(diào)整其尺寸；并且由于背景在默認(rèn)情況下是重復(fù)平鋪的，整個容器其實已經(jīng)被填滿了水平條紋：

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

垂直條紋
垂直條紋的代碼跟水平條紋幾乎是一樣的，差別主要在于：我們需要在
開頭加上一個額外的參數(shù)來指定漸變的方向。在水平條紋的代碼中，我們其
實也可以加上這個參數(shù)，只不過它的默認(rèn)值 to bottom 本來就跟我們的意
圖一致，于是就省略了。最后，我們還需要把 background-size 的值顛倒
一下：

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

需要注意的是：linear-gradient如果加了第一個參數(shù)，則其默認(rèn)方向就會變?yōu)?ldquo;從下向上”的，為此，筆者還向菜鳥教程投過郵件建議他們在文檔中修改措辭。

傾斜條紋
“傳統(tǒng)的”僅僅改變linear-gradient第一個參數(shù)——角度值的方式或者通過background-size增加“精確度”的方式都不能有效的達(dá)到真正意義上完美的傾斜背景：它們總是會在大小改變或者換一個傾斜度時把整個圖案搞亂！
幸運的是，我們還有更好的方法來創(chuàng)建斜向條紋：一個鮮為人知的真相是 linear-gradient() 和 radial-gradient() 還各有一個循環(huán)式的加強版：repeating-linear-gradient() 和 repeating-radial-gradient()。
它們的工作方式跟前兩者類似，只有一點不同：色標(biāo)是無限循環(huán)重復(fù)的，直
到填滿整個背景！

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

哦，對了，同上面一樣，所有的“-gradient”屬性在沒有限制起始位置和終止位置時都會有“漸變光暈”，如果我們改為下面這樣：

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

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

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用處還遠(yuǎn)遠(yuǎn)不止這些…

2020-10-17更新

radial-gradient及整體應(yīng)用

我們大概都知道：滾動條是一種常見的界面控件，用來提示一個元素除了可以看到的內(nèi)容之外，還包含了更多內(nèi)容。但是，它往往太過笨重，在視覺上喧賓奪主，因此現(xiàn)代操作系統(tǒng)已經(jīng)開始簡化它的外觀，當(dāng)用戶不與可滾動的元素交互時，滾動條就會被完全隱藏。
目前已知的“去除滾動條”的方法中，最常用的有：::-webkit-scrollbar{display:none;} ，但是很顯然，IE上無法使用 —— 它只允許改變滾動塊的顏色。

在CSS3的時代，我們可以在想要加滾動條的地方外包裹一層div，為其設(shè)置overflow:hidden，內(nèi)部用calc()函數(shù)動態(tài)計算width使其溢出！這可以有效解決IE下兼容性問題。

我們現(xiàn)在已經(jīng)很少通過滾動條來滾動頁面了（更多的是使用觸摸手勢），但滾動條對于元素內(nèi)容可滾動的提示作用仍然是十分有用的，哪怕對于那些沒有發(fā)生交互的元素也是如此；而且這種提示方式十分巧妙。
據(jù)說曾經(jīng) Google 推出了一款 RSS 閱讀器（已經(jīng)沒了），它的用戶體驗設(shè)計師找到了一種非常優(yōu)雅的方式來作出類似的提示：當(dāng)側(cè)邊欄的容器還有更多內(nèi)容時，一層淡淡的陰影會出現(xiàn)在容器的頂部和底部。就像這樣：
 

讓我們首先從一段簡單的結(jié)構(gòu)代碼開始，一個帶有示意性內(nèi)容的普通無序列表：

<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> 元素設(shè)置一些基本的樣式，讓它的高度略短于內(nèi)容，從而讓其內(nèi)容可以滾動：

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

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

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

現(xiàn)在，當(dāng)我們滾動列表時，這條陰影會一直停留在相同的位置。這正是背景圖像的默認(rèn)行為：它的位置是相對于元素固定的！不論元素的內(nèi)容是否發(fā)生了滾動。這一點也適用于 background-attachment: fixed 的背景圖像。它們唯一的區(qū)別是，當(dāng)頁面滾動時，后者是相對于視口固定的。有沒有辦法讓背景圖像跟著元素的內(nèi)容一起滾動呢？

現(xiàn)在常見的值只有inherit、scroll、fixed，但是從W3C文檔中可以看到：后來為background-attachment 屬性增加了一個新的關(guān)鍵字，叫作 local ！
如果將此屬性應(yīng)用到這條陰影上，它會帶給我們正好相反的效果：當(dāng)我們滾動到最頂端時，能看到一條陰影；但當(dāng)我們向下滾動時，這條陰影就消失了。

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

我想到了一個很常用的hack：我們需要兩層背景：一層用來生成那條陰影，另一層基本上就是一個用來遮擋陰影的白色矩形，其作用類似于遮罩層。生成陰影的那層背景將具有默認(rèn)的 background-attachment 值（scroll），因為我們希望它總是保持在原位。我們把遮罩背景的 background-attachment 屬性設(shè)置為 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的另一個應(yīng)用 —— 漸變遮罩層！

但是現(xiàn)在我們會發(fā)現(xiàn)：現(xiàn)在只有上邊有，下邊怎么搞？
這就需要用到css中的“簡寫”以及對*-gradient的理解了：如果不加第一個參數(shù)（不指明方向），則默認(rèn)是從上到下漸變的，但是如果加了第一個參數(shù)但是沒有指明to bottom或100%，那么它默認(rèn)是從下向上漸變的！

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;

到此這篇關(guān)于探索CSS屬性*-gradient的實用價值的文章就介紹到這了,更多相關(guān)CSS屬性gradient內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論