錐形漸變(conic gradient)是CSS3新增的一種漸變方式,在CSS樣式中以 conic-gradient() 函數(shù)來(lái)實(shí)現(xiàn)。錐形漸變是一種圓錐面上從圓心向外或由外朝向圓心逐漸變化的顏色。實(shí)現(xiàn)了顏色的漸變效果,可以用于各種設(shè)計(jì)中。
/* 實(shí)現(xiàn)從#f00到#00f的顏色漸變 */ background-image: conic-gradient(from 0deg at 50% 50%, #f00, #00f);
上述代碼中,conic-gradient() 函數(shù)后面參數(shù)的意思如下:
- from 0deg:從0度開(kāi)始顏色漸變
- at 50% 50%:以50% 50%為圓心開(kāi)始漸變
- #f00:從紅色開(kāi)始漸變
- #00f:漸變到藍(lán)色
可以通過(guò)調(diào)整參數(shù)來(lái)實(shí)現(xiàn)不同的錐形漸變效果。如下例:
/* 實(shí)現(xiàn)從#f00-#00f到#0f0的顏色漸變 */ background-image: conic-gradient( from 0deg at 50% 50%, #f00, #00f, #0f0, #f00 );
這實(shí)現(xiàn)了一個(gè)三色漸變,從紅色到藍(lán)色再到綠色,最后又回到了紅色。它的參數(shù)與上例相似,只是增加了一個(gè)綠色的過(guò)渡。
除了可以設(shè)置顏色之外,conic-gradient() 函數(shù)也可以設(shè)置可視圖案或角度,以實(shí)現(xiàn)更多的設(shè)計(jì)效果。具體的可以參考CSS官方文檔來(lái)學(xué)習(xí)。