Atributo box-shadow CSS
- Página anterior box-reflect
- Próxima página box-sizing
Definição e uso
A propriedade box-shadow adiciona uma ou mais sombras ao contorno.
Dica:Use os atributos border-image-* para construir botões bonitos e escaláveis!
Veja também:
Tutorial CSS3:Bordas do CSS3
Manual HTML DOM:Propriedade boxShadow
Exemplo
Adicione box-shadow ao elemento div:
div
{
box-shadow: 10px 10px 5px #888888;
}
Mais exemplos no final da página.
Sintaxe CSS
box-shadow: h-shadow v-shadow blur spread cor inset;
Notas:A propriedade box-shadow adiciona uma ou mais sombras ao contorno. Este atributo é uma lista de sombras separadas por vírgulas, onde cada sombra é definida por 2-4 valores de comprimento, valor opcional de cor e palavra-chave opcional inset. Valores omitidos são 0.
Valor do atributo
| Valor | Descrição | Teste |
|---|---|---|
| h-shadow | Obrigatório. Posição horizontal da sombra. Permite valores negativos. | Teste |
| v-shadow | Obrigatório. Posição vertical da sombra. Permite valores negativos. | Teste |
| blur | Opcional. Distância de desfoque. | Teste |
| spread | Opcional. Tamanho da sombra. | Teste |
| cor | Opcional. Cor da sombra. Veja os valores de cor CSS. | Teste |
| inset | Opcional. Mude a sombra externa (outset) para sombra interna. | Teste |
Detalhes técnicos
| Valor padrão: | nada |
|---|---|
| Herança: | não |
| Versão: | CSS3 |
| Sintaxe do JavaScript: | object.style.boxShadow="10px 10px 5px #888888" |
Mais exemplos
- Imagem jogada na mesa
- Este exemplo demonstra como criar uma imagem Polaroid e girar a imagem.
Suporte do navegador
Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.
Números com -webkit- ou -moz- indicam a primeira versão com prefixo usada.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
- Página anterior box-reflect
- Próxima página box-sizing
