Fungsi repeating-radial-gradient

Fungsi repeating-radial-gradient menentukan gradien radial yang berulang. Ini berarti kita menentukan pola tertentu gradien, misalnya, dari 0px hingga 10px - gradien dari merah ke biru muda dan gradien ini akan berulang di seluruh blok: 0px hingga 10px, dari 10px hingga 20px, dari 20px hingga 30px dan seterusnya.

Fungsi bekerja dengan parameter yang sama seperti radial-gradient, perbedaannya hanya pada efek pengulangan. Untuk parameter yang diterima, lihat deskripsi radial-gradient.

Sintaksis

cssselektor {
  background: repeating-radial-gradient([bentuk tipe posisi], warna1 ukuran1, warna2 ukuran2...);
}

Contoh

Lingkaran konsentris:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(circle at center, red 0px, red 2px, white 2px, white 4px);
  width: 400px;
  height: 200px;
}

Результат:

Contoh

Elips konsentris:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(ellipse at center, red 0px, red 4px, white 4px, white 8px);
  width: 400px;
  height: 200px;
}

Результат:

Contoh

Mari tempatkan lingkaran konsentris tidak di tengah, tapi di tepi:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(circle at 50px 100px, red 0px, red 2px, white 2px, white 4px);
  width: 400px;
  height: 200px;
}

Результат:

Lihat juga