Tutorial sobre como usar a propriedade box-shadow CSS3

A propriedade box-shadow do CSS3 nos permite obter facilmente efeitos de sombra de camada. Vamos explicar esse atributo detalhadamente na prática.

1. Compatibilidade do navegador do atributo box-shadow Vamos primeiro dar uma olhada na compatibilidade do navegador deste atributo:

Opera: Não sei qual versão ele passou a suportar. Quando postei este artigo para teste, acabei de atualizar o Opera para a versão mais recente 10.53, que já suporta o atributo box-shadow.
O Firefox suporta isso através da propriedade privada -moz-box-shadow.
Safari e Chrome suportam isso através da propriedade privada -webkit-box-shadow.
Não é compatível com todos os IEs (não sei se o IE9 melhorou). Não se preocupe, apresentaremos alguns Hacks para IE no final do artigo.
2. Sintaxe do atributo box-shadow
box-shadow tem seis valores configuráveis:

img{box-shadow: tipo de sombra deslocamento do eixo X deslocamento do eixo Y tamanho da sombra extensão da sombra cor da sombra}

Quando nenhum tipo de sombra estiver definido, o padrão será efeito de sombra. Quando definido para inserção, é um efeito de sombra interna.
O deslocamento do eixo X e do eixo Y não é equivalente, mas semelhante a "ângulo" e "posição" no Photoshop.
O tamanho, a extensão e a cor da sombra são iguais aos do Photoshop.
3. Análise de exemplo Vejamos o efeito de uma sombra de caixa através de vários exemplos. Primeiro, faça um HTML simples para teste:

Observação: para evitar problemas, apenas box-shadow está escrito no código CSS abaixo. No uso real, você também deve escrever -moz-box-shadow e -webkit-shadow. O que você precisa fazer é muito simples, copiar duas box-shadows e adicionar -moz- e -webkit- na frente delas.

imagem {
-moz-box-shadow:2px 2px 10px #06C;
-webkit-box-shadow:2px 2px 10px #06C;
sombra da caixa:2px 2px 10px #06C;
}

(1).Sombra projetada, sem deslocamento, tamanho de sombra de 10px, sem expansão, cor #06C.
img{box-shadow:0 0 10px #06C;}

O valor da cor aqui é o valor HEX. Também podemos usar o valor RGBA. A vantagem do valor RGBA é que ele possui um valor de transparência alfa adicional e você pode controlar a transparência da sombra.

img{box-shadow: 0 0 10px rgba(0, 255, 0, .5)}
(2). Adicione uma extensão de 20px ao acima.
img{box-shadow:0 0 10px 20px #06C;}

(3). Sombra interna, sem deslocamento, tamanho 10px, sem expansão, cor #06C.
img{box-shadow:inserir 0 0 10px #06C;}

(4). Vários efeitos de sombra.
Box-shadow pode ser usado várias vezes ao mesmo tempo. Vamos usar uma sombra de quatro cores.

img{box-shadow:-10px 0 10px vermelho, box-shadow:10px 0 10px azul,box-shadow:0 -10px 10px amarelo,box-shadow:0 10px 10px verde}

(5) A ordem de uso de vários atributos de sombra Ao usar vários atributos de sombra para o mesmo elemento, você precisa prestar atenção à sua ordem. Por exemplo, no código a seguir, primeiro escrevemos uma sombra verde de 10px e, em seguida, escrevemos um tamanho de 10px, mas estendido por uma sombra de 20px. O resultado é: uma camada sombreada verde sobre uma camada sombreada amarela.

img{box-shadow:0 0 10px verde;box-shadow:0 0 10px 20px amarelo}

Mas se mudarmos a ordem, assim:

img{box-shadow:0 0 10px 20px amarelo,box-shadow:0 0 10px verde;}

Não conseguiremos ver a camada sombreada verde escrita posteriormente porque ela está coberta pela camada amarela escrita primeiro e com raio maior.

4. Deixe o IE também suportar box-shadow
O próprio IE usa um filtro de sombra para obter efeitos semelhantes, e também existem alguns arquivos de hack js e .htc que podem ajudá-lo a obter esse efeito no IE. Não posso experimentar todos, então aqui apresento apenas aquele que usei.

ie-css3.htc é um arquivo htc que permite que o navegador IE suporte algumas propriedades CSS3, não apenas box-shadow, mas também permite que seu navegador IE suporte o atributo de canto arredondado border-radius e o atributo text-shadow text-shadow .

Como usar: baixe e coloque no diretório do servidor

Escreva o seguinte código em seu :

Na parte azul, insira o seletor usando o atributo box-shadow, e na parte verde, insira o caminho absoluto ou relativo de ie-css3.htc. De qualquer forma, certifique-se de que esteja acessível.

Então está tudo bem. Mas ainda há algumas coisas a serem observadas:

Quando você usa este arquivo htc, contanto que box-shadow, -moz-box-shadow ou -webkit-box-shadow esteja escrito em seu CSS, o IE irá renderizá-lo.
Ao usar este arquivo htc, você não pode escrever box-shadow: 0 0 10px red; mas box-shadow: 0px 0px 10px red;
A transparência alfa em valores RGBA não é suportada.
Sombras internas inseridas não são suportadas.
A expansão de sombra não é suportada.
As sombras só aparecerão em preto no IE, independentemente das outras cores que você definir para elas.
Portanto, este script permite apenas que o IE suporte alguns valores de box-shadow. Se você tiver outros scripts de hacks do IE melhores, deixe uma mensagem para compartilhar.