CSS3 Sombra (Shadows)

Use CSS3para aplicar sombras aos elementos.

Use CSS3Sombra

CSS3Permite que você adicione efeitos de sombra aos elementos, como no Photoshop, sem usar qualquer imagem. No CSS3Antes, as imagens de fatia eram usadas para criar sombras ao redor de elementos irritantes.

A próxima seção abordará como aplicar sombras a textos e elementos.

CSS3 box-sombra

box-A propriedade sombra pode ser usada para adicionar sombras ao retângulo do elemento. Você pode até usar uma lista de sombras separada por vírgulas para aplicar várias sombras. A sintaxe básica para criar sombras de caixa pode ser dada da seguinte forma:

box-sombra: deslocamento-x deslocamento-y borrada-raio cor;

Este box-Os componentes da propriedade sombra têm o seguinte significado:

• deslocamento-x —Define a quantidade de deslocamento horizontal da sombra.

• deslocamento-y —Define a deslocamento vertical da sombra.

• borrada-raio —Define o raio da borrada. Quanto maior o valor, maior a borrada, e mais borrada ficará a borda da sombra. Não é permitido usar valores negativos.

• cor —Define a cor da sombra. Se omitida ou não especificada, ela adotarácorvalores da propriedade.

Consulte a CSS3 box-propriedade sombra, para obter mais informações sobre outros valores possíveis.

.box{
　　　　largura:　200px;
　　　　altura:　150px;
　　　　fundo:　#ccc;
　　　　box-sombra:　5px　5px　10px　#999;
}

Da mesma forma, você pode usar uma lista separada por vírgulas para adicionar várias sombras a várias caixas:

.box{
　　　　largura:　200px;
　　　　altura:　150px;
　　　　fundo:　#000;
　　　　box-sombra:　5px　5px　10px　vermelho,　10px　10px　20px　amarelo;
}

CSS3 texto-sombra

Você pode usar a propriedade text-A propriedade sombra aplica efeitos de sombra ao texto. Você também pode usar com o box-A representação da sombra é a mesma para aplicar várias sombras ao texto.

h1　{
　　　　texto-sombra:　5px　5px　10px　#666;
}
h2　{
　　　　texto-sombra:　5px　5px　10px　vermelho,　10px　10px　20px　amarelo;
}