一、為什么叫做錐形漸變
因?yàn)殄F形漸變可以實(shí)現(xiàn)尖錐一樣的效果，如下圖所示：

尖錐效果示意

CSS代碼如下：

.example {
    width: 300px; height: 300px;
    background: conic-gradient(from 45deg, white, black, white);
}

二、錐形漸變的語(yǔ)法
錐形漸變的正式語(yǔ)法如下：

conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
可以看出錐形漸變由3部分組成：

起始角度
中心位置
角漸變斷點(diǎn)
其中起始角度和中心位置都是可以省略的，因此，最簡(jiǎn)單的錐形漸變用法如下，使用我最愛的深天空藍(lán)色：

.example {
    width: 300px; height: 150px;
    background-image: conic-gradient(white, deepskyblue);
}
效果如下圖所示：

白色到深天藍(lán)色錐形漸變效果圖

上圖具體渲染的細(xì)節(jié)我專門做了個(gè)圖標(biāo)注了下，方便大家學(xué)習(xí)，如下所示：

錐形漸變渲染原理簡(jiǎn)單示意

上面的原理示意圖究竟正不正確呢？

我們不妨修改幾個(gè)參數(shù)值，例如改變下起始角度和中心位置，看看錐形漸變效果是怎樣的，例如：

conic-gradient(from 45deg at 25% 25%, white, deepskyblue);
結(jié)果漸變起始角度改成45度，中心點(diǎn)位置移動(dòng)到相對(duì)元素左上角25%的位置，效果如下圖所示。

45度起始角度錐形漸變效果圖

錐形漸變的顏色斷點(diǎn):

錐形漸變的顏色斷點(diǎn)數(shù)據(jù)類型是<angular-color-stop-list>，顧名思義是角顏色斷點(diǎn)列表，有別于線性漸變和徑向漸變的斷點(diǎn)列表，使用的是角度值，而非長(zhǎng)度值。

例如：

conic-gradient(white, deepskyblue 45deg, white);
deepskyblue 45deg這里使用的是'45deg'是個(gè)角度值，于是仰望鑫空間，可以明顯看到2點(diǎn)鐘方向的顏色最深。

使用角度值設(shè)置斷點(diǎn)效果截圖

需要注意的是，角漸變斷點(diǎn)中設(shè)置的角度值是一個(gè)相對(duì)角度值，最終渲染的角度值是和起始角度累加的值，例如：

conic-gradient(from 45deg, white, deepskyblue 45deg, white);
此時(shí)deepskyblue實(shí)際渲染的坐標(biāo)角度是90deg（45deg + 45deg），效果如圖下圖所示，可以明顯看到3點(diǎn)鐘方向的顏色最深。

漸變斷點(diǎn)角度值是相對(duì)值效果示意

有此可見，錐形漸變中顏色斷點(diǎn)角度值和百分比值沒有什么區(qū)別，兩者可以互相轉(zhuǎn)換，一個(gè)完整的旋轉(zhuǎn)總共360度，因此，45deg等同于12.5%，因此，下面兩段CSS效果是一模一樣的：

/* 下面兩段語(yǔ)句效果一樣 */
conic-gradient(white, deepskyblue 45deg, white);
conic-gradient(white, deepskyblue 12.5%, white);
如果是漸變轉(zhuǎn)換點(diǎn)，角度值和百分比值也是也互相轉(zhuǎn)換的，例如下面的兩條語(yǔ)句都是合法的：

/* 合法 */
conic-gradient(white, 12.5%, deepskyblue);
/* 合法 */
conic-gradient(white, 45deg, deepskyblue);
效果如下圖所示，把漸變中間顏色移動(dòng)到了12.5%的位置（原來是在50%位置處），因此漸變的后半部分顏色就比較深。

漸變轉(zhuǎn)換點(diǎn)移動(dòng)到12.5%位置處的效果截圖

三、錐形漸變的應(yīng)用
錐形漸變可以非常方便地實(shí)現(xiàn)餅圖效果，例如：

.pie {
    width: 150px; height: 150px;
    border-radius: 50%;
    background: conic-gradient(yellowgreen 40%, gold 0deg 75%, deepskyblue 0deg);  
}
實(shí)時(shí)效果如下，不支持的瀏覽器會(huì)是純色，如果沒有任何效果，一定是非法抓取或復(fù)制的文章，請(qǐng)?jiān)L問鑫空間鑫生活原文：

其中，代碼部分的'gold 0deg 75%'這里就是漸變范圍語(yǔ)法（IE瀏覽器不支持），這是這里一個(gè)使用了角度值，一個(gè)是百分比值，這里0deg換成0%也是一樣的效果，并不是必須使用角度值。

然后，理論上，這里設(shè)置的數(shù)值應(yīng)該是40%，或者144deg，而不是0deg，不過漸變斷點(diǎn)有個(gè)特性，如果后面的漸變斷點(diǎn)位置值比前面的漸變斷點(diǎn)位置值小的時(shí)候，后面的漸變斷點(diǎn)的位置值會(huì)按照前面較大的漸變斷點(diǎn)位置值渲染。

于是乎，'gold 0deg 75%'這里的'0deg'就會(huì)使用'yellowgreen 40%'中的'40%'位置值進(jìn)行渲染，同理，'deepskyblue 0deg'實(shí)際是按照'deepskyblue 75%'渲染的。

也就是說，如果我們想要漸變顏色界限分明，只要設(shè)置起始漸變位置為0%就可以了，無需動(dòng)腦子去計(jì)算，算是一個(gè)CSS實(shí)用小技巧。

我們還可以使用錐形漸變實(shí)現(xiàn)的基于色相和飽和度的取色盤，CSS代碼如下：

.hs-wheel {
    width: 150px; height: 150px;
    border-radius: 50%;
    background: radial-gradient(closest-side, gray, transparent),
        conic-gradient(red, magenta, blue, aqua, lime, yellow, red);
}
效果如下圖所示：

錐形漸變實(shí)現(xiàn)的色盤效果截圖

錐形漸變是所有CSS方法中，實(shí)現(xiàn)棋盤效果（PNG透明背景的灰白網(wǎng)格效果）最簡(jiǎn)單的方法，一行CSS代碼就足夠了：

.checkerboard {
    width: 300px; height: 160px;
    background: conic-gradient(#eee 25%, white 0deg 50%, #eee 0deg 75%, white 0deg) 0 / 20px 20px;
}
實(shí)時(shí)效果如下，不支持的瀏覽器會(huì)是深天藍(lán)色deepskyblue，如果沒有任何效果，請(qǐng)戳這里訪問原文：

最后一個(gè)例子，演示如何借助錐形漸變實(shí)現(xiàn)很實(shí)用的loading效果，代碼如下：

.loading {
    width: 100px; height: 100px;
    border-radius: 50%;
    background: conic-gradient(deepskyblue, 30%, white);
    --mask: radial-gradient(closest-side, transparent 75%, black 76%);
    -webkit-mask-image: var(--mask);
    mask-image: var(--mask);
    animation: spin 1s linear infinite reverse;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

錐形漸變實(shí)現(xiàn)的loading效果

原理很簡(jiǎn)單，Loading圖像其實(shí)就是一個(gè)錐形漸變，只是使用了CSS遮罩屬性只讓外圈25%的范圍顯示，于是loading的圓環(huán)效果就出現(xiàn)了。

如果想要小尺寸的loading效果，直接修改上述CSS代碼中的width屬性值和height屬性值即可。

這個(gè)效果應(yīng)該有不少人會(huì)喜歡，所以我專門做了個(gè)demo，您可以狠狠地點(diǎn)擊這里：CSS conic-gradient錐形漸變實(shí)現(xiàn)loading效果實(shí)demo

四、兼容性及其他
錐形漸變是CSS Images Module Level 4規(guī)范中新定義的一種漸變，所以兼容性要比線性漸變和徑向漸變差很多，目前Chrome和Safari瀏覽器均已支持，F(xiàn)irefox即將正式支持。

責(zé)任編輯：中山網(wǎng)站建設(shè)
 【網(wǎng)訊網(wǎng)絡(luò)】國(guó)家高新技術(shù)企業(yè)》十一年專注軟件開發(fā)，網(wǎng)站建設(shè)，網(wǎng)頁(yè)設(shè)計(jì)，APP開發(fā)，小程序，微信公眾號(hào)開發(fā)，定制各類企業(yè)管理軟件（OA、CRM、ERP、OMS訂單管理系統(tǒng)、WMS進(jìn)銷存管理軟件等)！服務(wù)熱線：0760-88610046、13924923903，http://m.denorpool.com