12-box-shadow.md

Box Shadow

A propriedade box-shadow é utilizado para adicionar efeitos de sombra em volta de um elemento. Você pode especificar mais de um efeito, separando-os com vírgulas. Uma box-shadow é descrita pelo deslocamentos (offset) X e Y em relação ao elemento, desfoco, propagação do raio e cor.

Sintaxe

div {
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

Onde:

• O primeiro valor 2px equivale ao eixo x da pagina offset-x.

• O segundo valor 2px equivale ao eixo y da pagina offset-y.

• O terceiro valor 2px equivale ao blur, que a sombra vai ter blur-radius.

• E o ultimo atributo rgba(0, 0, 0, 0.2) é a cor que essa sombra vai receber color.

O Box-shadow generator é uma ferramenta interativa que permite a criação de box-shadow.

Próxima página → Transições