Συνάρτηση repeating-radial-gradient

Η συνάρτηση repeating-radial-gradient ορίζει μια επαναλαμβανόμενη ακτινική διαβάθμιση. Αυτό σημαίνει ότι ορίζουμε ένα συγκεκριμένο μοτίβο διαβάθμισης, για παράδειγμα, από 0px έως 10px - διαβάθμιση από κόκκινο σε γαλάζιο και αυτή η διαβάθμιση θα επαναλαμβάνεται σε ολόκληρο το μπλοκ: 0px έως 10px, από 10px έως 20px, από 20px έως 30px και ούτω καθεξής.

Η συνάρτηση λειτουργεί με τις ίδιες παραμέτρους όπως η radial-gradient, η μόνη διαφορά είναι στο εφέ επανάληψης. Για τις παραμέτρους που δέχεται, δείτε την περιγραφή της radial-gradient.

Σύνταξη

επιλογέας {
	background: repeating-radial-gradient([σχήμα τύπος θέση], χρώμα1 μέγεθος1, χρώμα2 μέγεθος2...);
}

Παράδειγμα

Ομόκεντροι κύκλοι:

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

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

Παράδειγμα

Ομόκεντρες έλλειψεις:

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

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

Παράδειγμα

Ας τοποθετήσουμε ομόκεντρους κύκλους όχι στο κέντρο, αλλά στην άκρη:

<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;
}

Δείτε επίσης

τη συνάρτηση repeating-linear-gradient,
που δημιουργεί μια επαναλαμβανόμενη γραμμική διαβάθμιση
τη συνάρτηση linear-gradient,
που δημιουργεί μια γραμμική διαβάθμιση
τη συνάρτηση radial-gradient,
που δημιουργεί μια ακτινική διαβάθμιση