CSS repeating-conic-gradient() 函数

定义和用法

repeating-conic-gradient() 函数用于重复锥形渐变。

版本：	CSS3

CSS 教程：CSS 渐变

一个重复的圆锥渐变：

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

重复的锥形渐变，拥有被定义的颜色起点和颜色终点：

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

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

值	描述
from angle	可选。整个锥形渐变旋转了此角度。默认值为 0 度。
at position	可选。规定圆锥渐变的渐变中心。默认值为 center。
color degree, ..., color degree	色标是您想要呈现平滑过渡的颜色。该值由一个颜色值和一个可选的停止位置（介于 0 和 360 之间的度数或介于 0% 和 100% 之间的百分比）组成。

值

描述

from angle

可选。整个锥形渐变旋转了此角度。默认值为 0 度。

at position

可选。规定圆锥渐变的渐变中心。默认值为 center。

color degree, ..., color degree

色标是您想要呈现平滑过渡的颜色。

该值由一个颜色值和一个可选的停止位置（介于 0 和 360 之间的度数或介于 0% 和 100% 之间的百分比）组成。

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome	IE / Edge	Firefox	Safari	Opera
69.0	79.0	83.0	12.1	56.0