Gradiente Radiale CSS

Gradiente Radiale CSS

Il gradiente radiale è definito dal suo centro.

Per creare un gradiente radiale, è necessario definire almeno due etichette di colore.

Sintassi

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

per default,shape per ellittico,size per l'angolo più lontano,position al centro.

Gradiente radiale - etichette di colore a intervallo uniforme (predefinito)

Esempio sottostante mostra un gradiente radiale con etichette di colore a intervallo uniforme:

Esempio

#grad {
  background-image: radial-gradient(red, yellow, green);
}

Prova tu stesso

Gradiente radiale - etichette di colore con intervalli diversi

Esempio sottostante mostra un gradiente radiale con intervalli di etichette di colore diversi:

Esempio

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

Prova tu stesso

Impostazione della forma

shape I parametri definiscono la forma. Accetta i valori circle o ellipse. Il valore predefinito è ellipse (ellisse).

Esempio sottostante mostra un gradiente radiale circolare:

Esempio

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

Prova tu stesso

Utilizzo delle chiavi di dimensione diverse

size I parametri definiscono la dimensione del gradiente. Accetta quattro valori:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Esempio

Impostato diverso size delle chiavi di gradiente radiale:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

Prova tu stesso

Gradiente radiale ripetuto

repeating-radial-gradient() La funzione viene utilizzata per il gradiente radiale ripetuto:

Esempio

Gradiente radiale ripetuto:

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

Prova tu stesso

Proprietà di transizione CSS

La tabella seguente elenca le proprietà di transizione CSS:

Proprietà Descrizione
background-image Impostare una o più immagini di sfondo per un elemento.