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

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

Contoh

Bulatan sepusat:

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

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

Letakkan bulatan sepusat bukan di tengah, tetapi 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