O efeito de sombra CSS é uma propriedade CSS que usamos com frequência, mas você já o entendeu cuidadosamente? Você só precisa copiá-lo diretamente do Blue Lake ao usá-lo. Você entende cada um de seus parâmetros? Que belos efeitos podem ser alcançados usando sombras?
Os efeitos de sombra são frequentemente usados em web design. Os efeitos de sombra podem destacar um elemento. Antes do advento do CSS3, se quiséssemos adicionar efeitos de sombra ao texto ou aos elementos, precisávamos usar imagens para conseguir isso, o que era muito inconveniente. Após o surgimento do CSS3, podemos adicionar efeitos de sombra ao texto ou elementos através das duas propriedades text-shadow e box-shadow, sem usar nenhuma imagem.
1. sombra de texto
Usando a propriedade text-shadow do CSS, podemos definir um efeito de sombra para o texto. A sintaxe da propriedade é a seguinte:
sombra de texto:offset-xoffset-yblurcolor;
A sintaxe é explicada da seguinte forma:
(1) offset-x: parâmetro obrigatório, define o deslocamento horizontal da sombra, que pode ser um valor negativo;
(2) offset-y: parâmetro obrigatório, define o deslocamento vertical da sombra, que pode ser um valor negativo;
(3) desfoque: parâmetro opcional, defina o raio do desfoque. Quanto maior o valor, maior será o desfoque, e o desfoque da borda da sombra não é permitido;
(4) cor: parâmetro opcional, defina a cor da sombra. Se o valor for omitido ou não especificado, o valor do atributo color será usado.
Dica: Use o atributo text-shadow para definir vários grupos de efeitos de sombra ao mesmo tempo. Use vírgulas para separar cada grupo. Os grupos definidos de efeitos de sombra serão listados em ordem de definição, com a primeira sombra no topo. breve. Além disso, se quiser cancelar o efeito de sombra do texto, você pode definir o valor do atributo text-shadow como nenhum.
[Exemplo] Use o atributo text-shadow para adicionar um efeito de sombra ao texto:
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=ie=edge><title>text-shadow</title></head><style>div :first-child{text-shadow:5px8px3pxred;}</style><body><div>Text-shadow</div></body></html>Resultados em execução:
Análise: sombra de texto: 5px 8px 3px vermelho Descrição do parâmetro;
2. sombra da caixa
Usando a propriedade box-shadow do CSS, podemos definir o efeito de sombra para elementos HTML. A sintaxe da propriedade é a seguinte:
box-shadow:h-shadowv-shadowblurspreadcolorinset;
A sintaxe é explicada da seguinte forma:
(1) h-shadow: parâmetro obrigatório, define o deslocamento na direção horizontal da sombra, que pode ser um valor negativo;
(2) v-shadow: parâmetro obrigatório, define o deslocamento na direção vertical da sombra, que pode ser um valor negativo;
(3) desfoque: parâmetro opcional, defina o raio do desfoque. Quanto maior o valor, maior será o desfoque, e o desfoque da borda da sombra não é permitido;
(4) spread: parâmetro opcional, define o tamanho da sombra;
(5) cor: parâmetro opcional, defina a cor da sombra;
(6) inserção: parâmetro opcional, altera a sombra externa padrão (início) para sombra interna.
Dica: Semelhante ao atributo text-shadow, o atributo box-shadow também pode definir vários grupos de efeitos de sombra ao mesmo tempo. Use vírgulas para separar cada grupo. Os vários grupos de efeitos de sombra definidos serão listados em ordem de definição. com a primeira sombra no final, e assim por diante.
[Exemplo] Use o atributo box-shadow para adicionar um efeito de sombra ao texto:
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=ie=edge><title>box-shadow</title></head><style >div:first-child{width:200px;height:200px;border:1pxsolidblack;box-shadow:5px8px3px2pxred;}</style><body><div></div></body></html>Resultados em execução:
Análise: box-shadow: 5px 8px 3px 2px vermelho descrição do parâmetro;