Fani cha CSS repeating-radial-gradient()

Ufafanuzi na Matumizi

CSS repeating-radial-gradient() Fani cha CSS kinaona upinga kirefu cha kuzingatia tena.

Mifano:

upinga kirefu upinga kirefu cha kuzingatia tena
radial-gradient(red, yellow, green); repeating-radial-gradient(red, yellow 10%, green 15%);

Mifano

Mwongozo 1

kubwa kipya cha upinga kirefu:

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

亲自试一试

例子 2

另一个重复的径向渐变，设置了形状大小和位置：

#grad1 {
  background-image: repeating-radial-gradient(ellipse farthest-corner at 25% 25%, red, yellow 10%, green 15%);
}

亲自试一试

例子 3

另一个重复的径向渐变，设置了两个颜色停止位置：

#grad1 {
  background-image: repeating-radial-gradient(red 0% 10%, yellow 11% 21%, green 22% 32%);
}

亲自试一试

CSS 语法

repeating-radial-gradient(shape size at position, start-color, ..., last-color);
值 描述
shape

定义渐变的形状。可能的值：

  • ellipse（默认）
  • circle
size

定义渐变的大小。可能的值：

  • farthest-corner（默认）
  • closest-side
  • closest-corner
  • farthest-side
at position 定义渐变的位置。默认值为 "center"。
start-color, ..., last-color

颜色终止点是您希望在其间呈现平滑过渡的颜色。

此值由颜色值和一或两个可选的停止位置（0% 到 100% 之间的百分比或沿渐变轴的长度）组成。

Vivutio vya teknolojia

Muungano wa versioni: CSS Images Module Level 3

Inaruhusu ya kifungu cha kawaida cha kufunguliwa kwa programu ya kuhifadhi interneti

Inaruhusu ya jadwali inaonekana na sababu ya kuanzisha kwa kawaida kwa kila kifungu kwa kawaida cha kifungu cha kwanza cha kufunguliwa kwa programu ya kuhifadhi interneti.

Chrome Edge Firefox Safari Opera
repeating-radial-gradient()
26 10 16 6.1 12.1
Mababu ya rangi ya misingi ya mbali mbali
71 79 64 12.1 58

Pangalau zaidi

Mafunzo:Mifano ya CSS

Maelezo:Mafanikio ya kina la kufungua maadili ya kina la kina

Maelezo:Fungu la conic-gradient() la CSS

Maelezo:Fungu la linear-gradient() la CSS

Maelezo:Fungu la radial-gradient() la CSS

Maelezo:Fungu la kipendeno la CSS repeating-conic-gradient()

Maelezo:Funguo ya CSS repeating-linear-gradient()