Manuale di riferimento CSS

Regole CSS (@RULES)

Completo della lista delle proprietà CSS

Funzione CSS repeating-radial-gradient()

La funzione CSS repeating-radial-gradient() crea un'immagine composta da gradienti radiali ripetuti che si radiano dall'origine. È simile al radial-gradient e utilizza gli stessi parametri, ma ripete i colori in tutte le direzioni per coprire l'intero contenitore. Il risultato della funzione è un oggetto di tipo <gradient>, che è un tipo speciale di <image>.

Funzione CSS

Esempio online

Gradiente lineare ripetuto:

Esempio

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Guida di Base (oldtoolbag.com)</title>　
<style>
#grad1 {
　　height: 200px;
　　background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
</style>
</head>
<body>
<h3>Gradiente radiale ripetuto</h3>
<div id="grad1"></div>
<p><strong>Attenzione:</strong> Internet Explorer 9 e versioni precedenti non supportano le sfumature di sfondo.</p>
</body>
</html>

Prova a vedere ‹/›

Definizione e uso

La funzione repeating-radial-gradient() viene utilizzata per creare un'immagine di gradiente radiale "ripetuto".

Versioni supportate: CSS3

Compatibilità del browser

Numeri nella tabella rappresentano la versione iniziale del browser che supporta la funzione.

I numeri specificati nel testo "webkit" o "moz" o "o" rappresentano la versione iniziale di supporto del prefisso per la funzione.

Funzione
repeating-radial-gradient()	26.0 10.0 -webkit-	10.0	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-

Sintassi CSS

background-image: repeating-radial-gradient(shape size at position, start-color, ..., last-color);

Valore	Descrizione
shape	Definire la forma del gradiente. Può essere: ellipse (predefinito): specifica il gradiente radiale ellittico circle: specifica il gradiente radiale circolare
size	Posizione specifica del contorno dell'angolo. Può essere uno dei seguenti valori: farthest-corner (predefinito): specifica la lunghezza del raggio della trasformazione radiale come la distanza dal centro all'angolo più lontano dal centro. closest-side: specifica la lunghezza del raggio della trasformazione radiale come la distanza dal centro al lato più vicino al centro. closest-corner: specifica la lunghezza del raggio della trasformazione radiale come la distanza dal centro all'angolo più vicino al centro. farthest-side: al contrario di closest-side, specifica la lunghezza del raggio della trasformazione radiale come la distanza dal centro al lato più lontano dal centro.
position	Posizione del centro, simile a on e background-position o transform-origin. Di default è "center"
start-color, ..., last-color	Per specificare i colori di inizio e fine del gradiente, è possibile utilizzare valori di lunghezza o percentuale per specificare la posizione dei colori di inizio e fine, ma non sono ammessi valori negativi.

Tutorial CSS: Gradiente CSS3

Funzione CSS

Regola @charset CSS Funzioni CSS