CSS repeating-conic-gradient() 函數

定義和用法

CSS repeating-conic-gradient() 函數用于重復錐形漸變。

實例：

錐形漸變 重復錐形漸變
conic-gradient(red, yellow); repeating-conic-gradient(red 10%, yellow 20%);

實例

例子 1

一個重復的錐形漸變：

#grad {
  background-image: repeating-conic-gradient(red 10%, yellow 20%);
}

親自試一試

例子 2

定義了顏色起點和終點的重復錐形漸變：

#grad {
  background-image: repeating-conic-gradient(red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}

親自試一試

例子 3

另一個設置了起始角度和中心位置的重復錐形漸變：

#grad1 {
  background-image: repeating-conic-gradient(from 10deg at 30% 30%, red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}

親自試一試

CSS 語法

repeating-conic-gradient([from angle] [at position,] color degree, color degree, ...);
值 描述
from angle

可選。整個錐形漸變按此角度旋轉。

默認值為 0deg。
at position

可選。指定錐形漸變的中心點。

默認值為 center。
color degree, ..., color degree

顏色終止點是您希望在其間呈現平滑過渡的顏色。

此值由顏色值和一或兩個可選的停止位置（0 到 360 度之間的角度或 0% 到 100% 之間的百分比）組成。

技術細節

版本： CSS Images Module Level 4

瀏覽器支持

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

Chrome Edge Firefox Safari Opera
69 79 83 12.1 56

相關頁面

教程：CSS 漸變

參考：CSS background-image 屬性

參考：CSS conic-gradient() 函數

參考：CSS linear-gradient() 函數

參考：CSS radial-gradient() 函數

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

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