Modificador sombra caixa

O modificador FolEs sombra-caixa adiciona efeitos de sombra ao redor da moldura de um elemento. Você pode definir vários efeitos separados por vírgulas.

Uma sombra de caixa é descrita pelos deslocamentos X (horizontal) e Y (vertical) em relação ao elemento, raio de desfoque e dispersão e cor.

Este modificador permite que você projete uma sombra projetada do quadro de quase qualquer elemento. Se a propriedade raio-borda for especificada em um elemento com uma sombra de caixa, a sombra assume os mesmos cantos arredondados. A ordem de exibição de várias sombras de caixa segue a mesma lógica da propriedade sombra-texto, sendo que a primeira sombra especificada está no topo.

A documentação do CSS possui um gerador de sombra de caixa, uma ferramenta interativa que permite gerar e visualizar uma sombra-caixa.

Sintaxe

/* Valores específicos */
sombra-caixa: nenhuma;

/* horizontal | vertical | cor */
sombra-caixa: 60px -16px verdeágua;

/* horizontal | vertical | raio de desfoque | cor */
sombra-caixa: 10px 5px 5px preto;

/* horizontal | vertical | raio de desfoque | raio de dispersão | cor */
sombra-caixa: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* Vários efeitos, separados por vírgula */
sombra-caixa: 3px 3px vermelho, -1em 0 0.4em oliva;

/* Valores globais */
sombra-caixa: herdar;
sombra-caixa: inicial;
sombra-caixa: reverter;
sombra-caixa: reverter-camada;
sombra-caixa: desarmar;

Tradução para CSS

sombra-caixa é traduzido para box-shadow.