Exemplo
Adicione uma caixa-sombra a um <div> elemento:
div
{
box-shadow: 10px 10px 5px #888888;
}
Tente você mesmo " Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
A propriedade box-shadow atribui um ou mais sombras para um elemento.
| Valor padrão: | none |
|---|---|
| Herdado: | no |
| Animatable: | yes. Read about animatable Try it |
| Versão: | CSS3 |
| sintaxe JavaScript: | object .style.boxShadow="10px 20px 30px blue" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
Números seguido por -webkit- ou -moz- especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| box-shadow | 10.0 4.0 -webkit- | 9 | 4.0 3,5 -moz- | 5.1 3.1 -webkit- | 10.5 |
CSS Syntax
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit; Note: A propriedade box-shadow atribui um ou mais sombras para um elemento. A propriedade é uma lista separada por vírgulas de sombras, cada especificado por 2-4 valores de comprimento, uma cor opcional, e uma palavra-chave de inserção opcional. comprimentos omitidos são 0.
Valores de propriedade
| Valor | Descrição | Jogue |
|---|---|---|
| none | Valor padrão. Sem sombra é exibida | Jogue " |
| h-shadow | Requeridos. A posição da sombra horizontal. Os valores negativos são permitidos | Jogue " |
| v-shadow | Requeridos. A posição da sombra vertical. Os valores negativos são permitidos | Jogue " |
| blur | Opcional. A distância borrão | Jogue " |
| spread | Opcional. O tamanho da sombra. Os valores negativos são permitidos | Jogue " |
| color | Opcional. A cor da sombra. O valor padrão é preto. Olhe para valores de cor CSS para uma completa lista de possíveis valores de cor. Nota: No Safari (on PC) é necessário o parâmetro de cor. Se você não especificar a cor, a sombra não é exibido em tudo. | Jogue " |
| inset | Opcional. Altera a sombra de uma sombra externa (outset) para uma sombra interna | Jogue " |
| initial | Define essa propriedade para o valor padrão. Leia sobre inicial | Jogue " |
| inherit | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
mais Exemplos
Imagens jogados na mesa
Este exemplo demonstra como criar "polaroid" fotos e rodar as imagens.
Páginas relacionadas
Tutorial CSS3: CSS3 Fronteiras
HTML DOM de referência: boxShadow property