Atributo box-reflect CSS

Definición y uso

box-reflect La propiedad se utiliza para crear efectos de reflexión de los elementos.

box-reflect El valor de la propiedad puede ser:

  • below(Abajo)
  • above(Arriba)
  • left(Izquierda)
  • right(Derecha)

Nota:box-reflect La propiedad no es una propiedad estándar y debe usarse -webkit- Prefijo.

Ejemplo

Ejemplo 1

Añadir efecto de reflejo debajo de la imagen:

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

Pruebe usted mismo

Ejemplo 2

box-reflect El atributo se puede aplicar a cualquier elemento HTML visible. El siguiente ejemplo crea un efecto de reflejo debajo de la etiqueta <p>:

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

Pruebe usted mismo

Ejemplo 3

box-reflect El atributo también se puede usar con la sintaxis de dos valores. El siguiente ejemplo crea un efecto de reflejo debajo de la imagen y establece una distancia de 70px:

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

Pruebe usted mismo

Ejemplo 4

box-reflect El atributo también se puede usar con la sintaxis de tres valores. El siguiente ejemplo crea un efecto de reflejo debajo de la imagen, establece una distancia de 10px y desvanece gradualmente:

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

Pruebe usted mismo

Sintaxis de CSS

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

Valor del atributo

Valor Descripción
none Valor predeterminado. No se muestra el efecto de reflejo.
below Cree un efecto de reflejo abajo del elemento.
above Cree un efecto de reflejo arriba del elemento.
left Cree un efecto de reflejo a la izquierda del elemento.
right Cree un efecto de reflejo a la derecha del elemento.
position offset

Sintaxis de dos valores:

  • position Establezca la posición del reflejo (below, above, left o right).
  • offset Establezca la distancia del reflejo. La distancia se puede expresar en unidades como px, pt, cm, etc. El valor predeterminado es 0.
position offset gradient

Sintaxis de tres valores:

  • position Establezca la posición del reflejo (below, above, left o right).
  • offset Establezca la distancia del reflejo. La distancia se puede expresar en unidades como px, pt, cm, etc. El valor predeterminado es 0.
  • gradient Establezca el efecto de transición del reflejo, por ejemplo, el efecto de desvanecimiento.
initial Establezca este atributo en su valor predeterminado. Consulte initial.
inherit Hereda este atributo del elemento padre. Consulte inherit.

Detalles técnicos

Valor predeterminado: none
Herencia: No
Producción de animación: No se admite. Consulte:Atributos relacionados con la animación.
Versión: CSS3
Sintaxis de JavaScript: object.style.webkitBoxReflect="below"

Compatibilidad del navegador

Los números en la tabla representan la versión inicial del navegador que admite completamente la propiedad.

Los números con prefijo -webkit- indican la versión inicial que admite este prefijo.

Chrome Edge Firefox Safari Opera
4.0 -webkit- 79.0 -webkit- No se admite 4.0 -webkit- 15.0 -webkit-