Proprietà CSS box-reflect

Definizione e uso

box-reflect L'attributo viene utilizzato per creare l'effetto riflettente degli elementi.

box-reflect Il valore dell'attributo può essere:

  • below(Sotto)
  • above(Sopra)
  • left(Sinistra)
  • right(Destra)

Attenzione:box-reflect L'attributo non è un attributo standard e deve essere utilizzato -webkit- Prefisso.

Esempio

Esempio 1

Aggiungi un effetto di riflessione sotto l'immagine:

img {
  -webkit-box-reflect: below;
}

Prova personalmente

Esempio 2

box-reflect L'attributo può essere applicato a qualsiasi elemento HTML visibile. Esempio: crea un effetto di riflessione sotto il tag <p>:

p {
  -webkit-box-reflect: below;
}

Prova personalmente

Esempio 3

box-reflect L'attributo può essere utilizzato con la sintassi a due valori. Esempio: crea un effetto di riflessione sotto l'immagine, con una distanza di 70px:

img {
  -webkit-box-reflect: below 70px;
}

Prova personalmente

Esempio 4

box-reflect L'attributo può anche essere utilizzato con la sintassi a tre valori. Esempio: crea un effetto di riflessione sotto l'immagine, con una distanza di 10px e un effetto di dissolvenza:

img {
  -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}

Prova personalmente

Sintassi CSS

box-reflect: none|below|above|left|right|position offset gradient|initial|inherit;

Valore dell'attributo

Valore Descrizione
none Valore predefinito. Non visualizza l'effetto di riflessione.
below Crea un effetto di riflessione sotto l'elemento.
above Crea un effetto di riflessione sopra l'elemento.
left Crea un effetto di riflessione sulla sinistra dell'elemento.
right Crea un effetto di riflessione sulla destra dell'elemento.
position offset

Sintassi a due valori:

  • position Imposta la posizione della riflessione (below, above, left o right).
  • offset Imposta la distanza della riflessione. La distanza può essere espressa in unità come px, pt, cm, ecc. Il valore predefinito è 0.
position offset gradient

Sintassi a tre valori:

  • position Imposta la posizione della riflessione (below, above, left o right).
  • offset Imposta la distanza della riflessione. La distanza può essere espressa in unità come px, pt, cm, ecc. Il valore predefinito è 0.
  • gradient Imposta l'effetto di transizione della riflessione, ad esempio l'effetto di dissolvenza.
initial Imposta questa proprietà al suo valore predefinito. Vedi: initial.
inherit Eredita questa proprietà dal suo elemento padre. Vedi: inherit.

Dettagli tecnici

Valore predefinito: none
Ereditarietà: No
Creazione di animazioni: Non supportato. Vedi:Proprietà correlate agli animazioni.
Versione: CSS3
Sintassi JavaScript: object.style.webkitBoxReflect="below"

Supporto del browser

I numeri nella tabella rappresentano la versione iniziale del browser che supporta completamente l'attributo.

I numeri con prefisso -webkit- rappresentano la versione iniziale di supporto per questo prefisso.

Chrome Edge Firefox Safari Opera
4.0 -webkit- 79.0 -webkit- Non supportato 4.0 -webkit- 15.0 -webkit-