Συνάρτηση 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,
που δημιουργεί μια ακτινική διαβάθμιση