English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
La funzione CSS repeating-linear-gradient() crea un <image> composto da gradienti lineari ripetuti, una funzione simile a linear-gradient che utilizza gli stessi parametri, ma che ripete il gradiente in tutte le direzioni per coprire l'intero contenitore. Il risultato di questa funzione è un oggetto di tipo <gradient>, che è un tipo speciale di <image>.
Progressione lineare ripetuta:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial di base (oldtoolbag.com)</title>
<style>
#grad1 {
height: 200px;
background-color: red; /* Visualizzato quando il browser non supporta */
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
#grad2 {
height: 200px;
background-color: red; /* Visualizzato quando il browser non supporta */
background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%);
}
#grad3 {
height: 200px;
background-color: red; /* Visualizzato quando il browser non supporta */
background-image: repeating-linear-gradient(190deg,red,yellow 7%,green 10%);
}
#grad4 {
height: 200px;
background-color: red; /* Visualizzato quando il browser non supporta */
background-image: repeating-linear-gradient(90deg,red,yellow 7%,green 10%);
}
</style>
</head>
<body>
<h1>Progressione lineare ripetuta</h1>
<div id="grad1"></div>
<p>45deg:</p>
<div id="grad2"></div>
<p>190deg:</p>
<div id="grad3"></div>
<p>90deg:</p>
<div id="grad4"></div>
<p><strong>Attenzione:</strong> Internet Explorer 9 e le versioni precedenti non supportano la progressione lineare.</p>
</body>
</html>Prova a vedere ‹/›La funzione repeating-linear-gradient() viene utilizzata per creare un'immagine di progressione lineare ripetuta.
Versioni supportate: CSS3
I numeri nella tabella rappresentano il numero della prima versione del browser che supporta la funzione.
"webkit" o "moz" o "o" indicano il numero della prima versione supportata della funzione.
| funzione | |||||
|---|---|---|---|---|---|
| repeating-linear-gradient() | 26.0 10.0 -webkit- | 10.0 | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.1 -o- |
background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
| Valore | descrizione |
|---|---|
| angle | Definisce la direzione dell'angolo di progressione. Da 0deg a 360deg, il valore predefinito è 180deg. |
| side-or-corner | Specificare l'inizio del gradiente lineare. Composto da due parole chiave: la prima specifica la posizione orizzontale (left o right), la seconda specifica la posizione verticale (top o bottom). L'ordine è casuale, ogni parola chiave è opzionale. |
| color-stop1, color-stop2,... | Specificare i colori di inizio e fine del gradiente, composti da valori di colore, posizioni di fermata (opzionali, specificate in percentuale). |
Diversi gradienti ripetuti:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial di base (oldtoolbag.com)</title>
<style>
#grad1 {
height: 200px;
background-image: repeating-linear-gradient(45deg,red,blue 7%,green 10%);
}
#grad2 {
height: 200px;
background-image: repeating-linear-gradient(190deg,red,blue 7%,green 10%);
}
#grad3 {
height: 200px;
background-image: repeating-linear-gradient(90deg,red,blue 7%,green 10%);
}
</style>
</head>
<body>
<h3>Gradiente lineare ripetuto</h3>
<p>Gradiente lineare di 45 gradi, dal rosso al blu:</p>
<div id="grad1"></div>
<p>Gradiente lineare di 190 gradi, dal rosso al blu:</p>
<div id="grad2"></div>
<p>Gradiente lineare di 90 gradi, dal rosso al blu:</p>
<div id="grad3"></div>
<p><strong>Attenzione：</strong> Internet Explorer 9 e versioni precedenti non supportano i gradienti.</p>
</body>
</html>Prova a vedere ‹/›Tutorial CSS: Gradiente CSS3