CSS repeating-conic-gradient() function

paglilinaw at paggamit

CSS repeating-conic-gradient() ang function ay ginagamit para sa pagpaliwanag na matinding likidong pagbabagong pata.

halimbawa:

matinding likidong pagbabagong pata paliwanag na matinding likidong pagbabagong pata
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 渐变

參考：Atributo ng background-image ng CSS

參考：CSS conic-gradient() 函数

參考：CSS linear-gradient() 函数

參考：CSS radial-gradient() 函数

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

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