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

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

Αυτή η συνάρτηση εφαρμόζεται σε ιδιότητες που ορίζουν εικόνα φόντου: background, background-image ή εικόνα περιγράμματος: border-image, background-image-source.

Σύνταξη

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

Τιμές

Τιμή	Περιγραφή
κατεύθυνση	Ορίζει μια συγκεκριμένη κατεύθυνση της κλίσης σε οποιεσδήποτε μονάδες για γωνίες ή με λέξεις-κλειδιά `top`, `left`, `right`, `bottom` ή συνδυασμό τους. Η σειρά των λέξεων δεν έχει σημασία. Η παράμετρος είναι προαιρετική: αν δεν γραφεί, η κλίση θα πηγαίνει από πάνω προς τα κάτω. Πριν από την κατεύθυνση τοποθετείται η λέξη `to`.
γωνία	Γωνία σε οποιεσδήποτε μονάδες για γωνίες. Μπορεί να είναι θετική ή αρνητική. Η παράμετρος είναι προαιρετική. Ταυτόχρονα μπορεί να οριστεί ή γωνία, ή κατεύθυνση (ή τίποτα απολύτως).
χρώμα1	Αρχικό χρώμα της κλίσης σε οποιεσδήποτε μονάδες για χρώμα.
χρώμα2	Τελικό χρώμα της κλίσης σε οποιεσδήποτε μονάδες για χρώμα.
μέγεθος	Ορίζει την έκταση ενός συγκεκριμένου χρώματος της κλίσης σε οποιεσδήποτε μονάδες για μέγεθος.

Παράδειγμα . Η απλούστερη παραλλαγή

Η κλίση θα φαίνεται ως εξής: από 0px έως 20px καθαρό κόκκινο χρώμα, από 20px έως 40px - κλίση από κόκκινο σε γαλάζιο. Και έτσι θα επαναλαμβάνεται από πάνω προς τα κάτω (γι' αυτό είναι και επαναλαμβανόμενη κλίση):

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

#elem {
	background: repeating-linear-gradient(red 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Παράδειγμα . Καθαρά χρώματα

Η κλίση θα φαίνεται ως εξής: από 0px έως 20px καθαρό κόκκινο χρώμα, από 20px έως 40px - καθαρό γαλάζιο (το κόλπο είναι ότι το δεύτερο χρώμα ξεκινάει εκεί που τελειώνει το πρώτο). Και έτσι θα επαναλαμβάνεται από πάνω προς τα κάτω:

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

#elem {
	background: repeating-linear-gradient(red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Παράδειγμα . Αλλαγή κατεύθυνσης

Τώρα η κατεύθυνση της κλίσης θα είναι από δεξιά προς τα αριστερά:

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

#elem {
	background: repeating-linear-gradient(to left, red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Παράδειγμα . Κατεύθυνση σε μοίρες

Ως κατεύθυνση ορίζουμε μια γωνία σε μοίρες:

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

#elem {
	background: repeating-linear-gradient(45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

Παράδειγμα . Αρνητική τιμή

Θα κάνουμε την κατεύθυνση αρνητική τιμή:

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

#elem {
	background: repeating-linear-gradient(-45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

Δείτε επίσης

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