CSS repeating-conic-gradient()函数

在CSS中，我们可以使用repeating-conic-gradient()函数为元素添加锥形渐变背景。和其他渐变函数一样，锥形渐变函数的用法也很简单。

语法

background: repeating-conic-gradient(center, from, stop1, stop2, ..., to);

其中，center表示渐变圆心的位置，可以使用[x,y]坐标值表示，也可以使用关键字表示：

• center: 居中
• top: 顶部居中
• bottom: 底部居中
• left: 左侧居中
• right: 右侧居中
• top left: 左上角
• top right: 右上角
• bottom left: 左下角
• bottom right: 右下角

from和to表示起始和结束的角度，可以使用deg或rad等单位表示。例如0deg表示从上方开始渐变，90deg表示从右侧开始渐变。

stop1,stop2等表示停止点和颜色值，可以使用颜色名称、RGB值、HSL值等方式表示。

示例

以下是一个简单的示例，为元素添加了一个从上方开始的锥形渐变背景，并且每隔90度进行一次颜色切换。

background: repeating-conic-gradient(center, 
  #ff0000 0, #ff0000 90deg, 
  #00ff00 90deg, #00ff00 180deg, 
  #0000ff 180deg, #0000ff 270deg, 
  #ffff00 270deg, #ffff00);

效果如下：

兼容性

repeating-conic-gradient()函数的兼容性还不太理想，目前只有最新的Chrome浏览器支持该函数。在其他浏览器中可能需要使用厂商前缀来实现。