Use HTML5 e CSS para obter efeito de sombra de texto

Dois dias atrás, uma garota bonita que estava aprendendo front-end HTML5 me perguntou como conseguir o efeito de sombra de texto. Ela me contou sobre text-shadow. Ela também sabia sobre text-shadow, mas não conseguiu fazer com que ficasse do jeito que queria. Na verdade, os novos recursos do CSS3 são muito poderosos. Ok, fofoca. Sem mais delongas, vamos primeiro dar uma olhada nesta sombra de texto.

text-shadow Parâmetros de sombra de texto: Parâmetro 1: O primeiro valor de comprimento é usado para definir o valor de deslocamento horizontal da sombra do objeto. Pode ser negativo Parâmetro 2: O segundo valor do comprimento é usado para definir o valor do deslocamento vertical da sombra do objeto. Pode ser negativo Parâmetro 3: Se o terceiro valor de comprimento for fornecido, ele será usado para definir o valor de desfoque de sombra do objeto. Valores negativos não são permitidos Parâmetro 4: Defina a cor da sombra do objeto

sombra de texto: 10px 10px 50px #000;

Como podemos conseguir o efeito da imagem acima?

Estrutura HTML Estilo CSS Estilo da fonte Cor da fonte Sombra do texto Então vamos dar uma olhada no código específico:

HTML:

 <div class=text>[Milhares de temperamentos] Shang Xuetang</div>

CSS:

 .text{ fonte: negrito 100px/1.5 'Microsoft Yahei'; cor: dodgerblue;/*text-shadow*/ text-shadow: 10px 10px 50px #000; /*text-shadow: 10px 10px 50px #000,-10px - 10px 50px #f00;*/}

Agora vamos dar uma olhada em como fazer o efeito da belezinha me perguntando no front end.

Na verdade é muito simples, vamos direto ao código~

HTML:

 <div class=text>[Milhares de temperamentos] Shang Xuetang</div>

CSS:

 body { background: #000; color: #fff;}.text{ font: bold 100px/1.5 georgia, sans-serif;/*Cores diferentes, tamanhos de desfoque de vários valores diferentes*/ text-shadow: 0 0 10px #fff , 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;}

Divulgue seu pensamento. Na verdade, os estilos CSS3 são muito interessantes. Às vezes, apenas uma pequena mudança pode obter efeitos muito legais ^.^.

O texto acima é a introdução do editor ao uso de HTML5 e CSS para obter efeitos de sombra de texto. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!