CSS3 propriedade box-shadow
Exemplos
Somando-se o elemento div sombra:
div
{
box-shadow: 10px 10px 5px #888888;
}
{
box-shadow: 10px 10px 5px #888888;
}
tente »
Na parte inferior desta página para mais exemplos.
Suporte a navegadores
Números na tabela representam o primeiro navegador a suportar o número da versão da propriedade.
Imediatamente após a -webkit- digitais, -ms- ou -moz- atrás em apoio do prefixo atribuem primeiro número da versão do browser.
| propriedade | |||||
|---|---|---|---|---|---|
| border-image | 10,0 -webkit- | 9.0.0 | 4,0 (2,0) [3] 3.5 (1.9.1) -moz | 5.1 [1] 3.0 -webkit | 10,5 [1] -o- |
Atributo definições e instruções
propriedade box-shadow pode definir uma ou mais caixa de sombra.
| padrão: | nenhum |
|---|---|
| herança: | não |
| versão: | CSS3 |
| sintaxe JavaScript: | objeto .style.boxShadow = "10px 10px 5px #888888" |
gramática
box-shadow:h-shadow v-shadow blur spread colorinset;
Nota: propriedade boxShadowpara adicionar um ou mais sombreamento para o quadro. A propriedade é uma lista separada por vírgulas de sombra, cada sombra de um 2-4 valores duração, um valor de cor opcional e uma palavra-chave de inserção opcional especificado. Omitindo valor de comprimento é 0.
| valor | explicação |
|---|---|
| h-sombra | Necessário. Posição da sombra horizontal. permitir negativo |
| v-sombra | Necessário. A posição vertical da sombra. permitir negativo |
| borrão | Opcional. Distância difusa |
| propagação | Opcional. O tamanho da sombra |
| cor | Opcional. cor da sombra. Nos valores de cor CSS para encontrar uma lista completa dos valores de cores |
| inserção | Opcional. Da sombra da camada externa (no início) para alterar a sombra interna sombra |
exemplos on-line
Rodar imagem
Este exemplo demonstra como criar um "polaroid" Fotos e rodar a imagem.
artigos relacionados
tutorial CSS3: CSS3 Fronteiras
