Fungsi repeating-radial-gradient

Fungsi repeating-radial-gradient menetapkan gradien jejari berulang. Ini bermakna kita menetapkan corak tertentu gradien, contohnya, dari 0px hingga 10px - gradien dari merah ke biru muda dan gradien ini akan berulang pada seluruh blok: 0px hingga 10px, dari 10px hingga 20px, dari 20px hingga 30px dan seterusnya.

Fungsi ini beroperasi dengan parameter yang sama seperti radial-gradient, perbezaannya hanya pada kesan pengulangan. Untuk parameter yang diterima, sila lihat penerangan radial-gradient.

Sintaks

pemilih {
	background: repeating-radial-gradient([bentuk jenis kedudukan], warna1 saiz1, warna2 saiz2...);
}

Contoh

Bulatan sepusat:

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

<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

Letakkan bulatan sepusat bukan di tengah, tetapi 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 mencipta gradien linear berulang
fungsi linear-gradient,
yang mencipta gradien linear
fungsi radial-gradient,
yang mencipta gradien jejari