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

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

Contoh

Lingkaran konsentris:

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

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

Contoh

Elips konsentris:

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

#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:

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

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

Lihat juga

fungsi repeating-linear-gradient,
yang membuat gradien linear berulang
fungsi linear-gradient,
yang membuat gradien linear
fungsi radial-gradient,
yang membuat gradien radial