Propriedade box-reflect do CSS

Definição e uso

box-reflect A propriedade é usada para criar efeitos de reflexo dos elementos.

box-reflect O valor da propriedade pode ser:

  • below(abaixo)
  • above(acima)
  • left(à esquerda)
  • right(à direita)

Atenção:box-reflect A propriedade é uma propriedade não padrão e deve ser usada -webkit- Prefixo.

Exemplo

Exemplo 1

Adicionar efeito de reflexão abaixo da imagem:

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

Experimente você mesmo

Exemplo 2

box-reflect A propriedade pode ser aplicada a qualquer elemento HTML visível. O exemplo a seguir cria um efeito de reflexão abaixo da tag <p>:

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

Experimente você mesmo

Exemplo 3

box-reflect A propriedade pode usar a sintaxe de dois valores. O exemplo a seguir cria um efeito de reflexão abaixo da imagem e define uma distância de 70px:

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

Experimente você mesmo

Exemplo 4

box-reflect A propriedade também pode usar a sintaxe de três valores. O exemplo a seguir cria um efeito de reflexão abaixo da imagem, define uma distância de 10px e desvanece gradualmente:

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

Experimente você mesmo

Sintaxe do CSS

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

Valor do atributo

Valor Descrição
none Valor padrão. Não exibe o efeito de reflexão.
below Crie um efeito de reflexão no lado inferior do elemento.
above Crie um efeito de reflexão no lado superior do elemento.
left Crie um efeito de reflexão no lado esquerdo do elemento.
right Crie um efeito de reflexão no lado direito do elemento.
position offset

Sintaxe de dois valores:

  • position Defina a posição da reflexão (below, above, left ou right).
  • offset Defina a distância da reflexão. A distância pode usar unidades como px, pt, cm, etc. O valor padrão é 0.
position offset gradient

Sintaxe de três valores:

  • position Defina a posição da reflexão (below, above, left ou right).
  • offset Defina a distância da reflexão. A distância pode usar unidades como px, pt, cm, etc. O valor padrão é 0.
  • gradient Defina o efeito de transição da reflexão, por exemplo, efeito de desvanecimento.
initial Defina essa propriedade como seu valor padrão. Veja: initial.
inherit Herda essa propriedade do elemento pai. Veja: inherit.

Detalhes técnicos

Valor padrão: none
Herança: Não
Produção de animação: Não suportado. Veja:Propriedades relacionadas a animação.
Versão: CSS3
Sintaxe do JavaScript: object.style.webkitBoxReflect="below"

Suporte do navegador

Os números na tabela representam a primeira versão do navegador que suporta completamente essa propriedade.

Os números com prefixo -webkit- indicam a primeira versão que suporta esse prefixo.

Chrome Edge Firefox Safari Opera
4.0 -webkit- 79.0 -webkit- Não suportado 4.0 -webkit- 15.0 -webkit-