認識「新」朋友—conic-gradient

曾經，咱們須要用圖片來完成不少視覺效果，代碼難以實現的形狀、色彩等等，還好後來有了CSS3，不少新的屬性能夠實現之前沒法想象的元素，幫咱們節省了大量的開發成本和網絡傳輸成本。

本篇咱們聊一種新的漸變—conic-gradient，說新其實也不算新，早在兩三年之前，就有書籍和開發者作過度享，但那個時候瀏覽器的支持狀況很不樂觀，即使是如今，也只有較新版本的瀏覽器支持，不過這不影響咱們去學習。

現役成員

咱們熟悉的漸變有線性漸變（linear-gradient）和徑向漸變（radial-gradient），而且在平常需求中用處很廣，而它們也每每不負所托，能發揮奇效。

好比：

三角

background-image:linear-gradient(to bottom right,orange 0,orange 49%,transparent 50%,transparent 100%)
複製代碼

條紋

background:repeating-linear-gradient(45deg,#fb3,#fb3,5px ,#58a 0,#5ba  10px);
複製代碼

鏤空

background-image:radial-gradient(transparent 0,transparent 49%,orange 50%,orange 100%)
複製代碼

當這些創意第一次出現時，無不使人驚歎，但如今你們已經習覺得常了。

今天介紹的這位就更具特點，你可能真沒聽過。

錐形漸變

咱們知道，線性漸變是顏色沿着一條筆直的軸線變化，還能夠調整角度；徑向漸變則是以一個點爲圓心向四周擴散，錐形是怎樣的呢？

不妨直接看個效果：

如下代碼在新版Chrome中都可正常運行

background: conic-gradient(green, orange);
複製代碼

這是個簡單的例子，看起來要比以前的那些簡單許多。效果以下：

這麼看來，它的工做原理彷佛明瞭,和徑向漸變相似，它也是以一個點爲中心起始點，不一樣的是，不是由內向外擴散，而是 沿着圓周變化。

正式看一下語法規則：

conic-gradient( from 起始角度 at 中心點位置, 漸變斷點 )

從上面的例子能夠看出，前兩個參數是能夠省略的，不影響代碼執行，不過還有一個細節這裏沒有體現，即顏色斷點是能夠添加角度（或者百分比）的，就像線性漸變能夠添加斷點同樣。

咱們索性把上面的例子用新數據改一下看看效果：

background: conic-gradient(from 60deg at 20% 20%, green 40%, orange 40%);
複製代碼

哇偶，乍一看有點奇怪，但不以爲有點神奇麼？換個角度思考，若是讓你實現這麼個效果，是否是會摸不着頭腦？

咱們每每對規則圖形敏感，一遇到不規則，就腦瓜短路，因此，多思考，多嘗試~

好了，是時候看看咱們能夠用它實現哪些實用的效果了！

色盤

background: conic-gradient(red, magenta, blue, aqua, lime, yellow, red);
複製代碼

美輪美奐。

餅圖

background: conic-gradient(#3ebd3e 0, #3ebd3e 30%, #ff9800 30%, #ff9800 70%, #03a9f4 70%, #03a9f4 100%);
複製代碼

無縫銜接

既然這些能夠，那麼彩色邊框也就能夠。

環狀圖也不在話下。

相似loading應該也能夠。

咋不上天呢？~

好了，效果是說不完的，先展現到這兒了，部分代碼沒有列出，想看的話能夠來這裏。

它能作的固然不止這些，但筆者一貫以實用爲準則，花樣是其次，就不玩兒那麼多了，有興趣你能夠隨意玩兒~

總結

雖然我向來認爲JavaScript要比CSS難一些，但總有一些人會說CSS纔是最難的，也不無道理，但它的難，也正是它出彩的地方，每個屬性出來感受都很簡單，但若是可以充分發揮想象力，再結合數學、圖形以及動畫方面的能力，就能作出不少意想不到的效果。

不知你看完感受如何呢，是否躍躍欲試？那就擼起來吧！下篇見！~

認識「新」朋友—conic-gradient