Página Inicial>Tutorial de web design>Efeitos especiais da Web

Tutorial sobre como usar a propriedade box-shadow CSS3

Autor：Eve Cole Data da Última Atualização：2010-05-14 17:29:27

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

Vejamos primeiro a compatibilidade deste atributo com o navegador:

  • 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:

    <html>
    <cabeça>
    <style type="text/css">Escreva a parte CSS aqui</style>
    </head>
    <corpo>
    <img src="test.jpg" />
    </body>
    </html>

    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.

    img {
    -moz-box-shadow:2px 2px 10px #06C;
    -webkit-box-shadow:2px 2px 10px #06C;
    box-shadow:2px 2px 10px #06C;
    }
Artigos Relacionados