CSS repeating-conic-gradient() 函数

定义和用法

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

版本: CSS3

另请参阅:

CSS 教程:CSS 渐变

实例

例子 1

一个重复的圆锥渐变:

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

亲自试一试

例子 2

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

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

亲自试一试

CSS 语法

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% 之间的百分比)组成。

浏览器支持

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

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