CSS conic-gradient() 函數

定義和用法

CSS 的 conic-gradient() 函數將錐形漸變設置為背景圖像。

錐形漸變是一種顏色過渡圍繞中心點旋轉的漸變（類似于餅圖和色輪）。

要創建錐形漸變，必須至少定義兩個顏色停止點。

錐形漸變示例：

實例

例子 1

有三種顏色的錐形漸變：

#grad {
  background-image: conic-gradient(red, yellow, green);
}

親自試一試

例子 2

有五種顏色的錐形漸變：

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
}

親自試一試

例子 3

有三種顏色并為每種顏色指定角度的錐形漸變：

#grad {
  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg)
}

親自試一試

例子 4

通過添加 border-radius: 50% 使錐形漸變看起來像餅圖：

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}

親自試一試

例子 5

帶有起始角度的錐形漸變：

#grad {
  background-image: conic-gradient(from 90deg, red, yellow, green);
  border-radius: 50%;
}

親自試一試

例子 6

帶有中心位置的錐形漸變：

#grad {
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

親自試一試

例子 7

同時帶有起始角度和中心位置的錐形漸變：

#grad {
  background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

親自試一試

例子 8

另一個餅圖示例：

#grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);
  border-radius: 50%;
}

親自試一試

CSS 語法

background-image: conic-gradient([from angle] [at position,] color degree, color degree, ...);

技術細節

瀏覽器支持

表格中的數字表示首個完全支持該函數的瀏覽器版本。

相關頁面

教程：CSS 漸變

參考：CSS background-image 屬性

參考：CSS linear-gradient() 函數

參考：CSS radial-gradient() 函數

參考：CSS repeating-conic-gradient() 函數

參考：CSS repeating-linear-gradient() 函數

參考：CSS repeating-radial-gradient() 函數