Utilice Html5 y CSS para lograr el efecto de sombra de texto

Hace dos días, una chica guapa que estaba aprendiendo el front-end HTML5 me preguntó cómo lograr el efecto de sombra de texto. Ella me habló de text-shadow. También sabía sobre text-shadow, pero no pudo hacer que se viera como quería. De hecho, las nuevas características de CSS3 son muy poderosas. Bien, chismes, sin más preámbulos, echemos un vistazo a esta sombra de texto.

text-shadow Parámetros de sombra de texto: Parámetro 1: el primer valor de longitud se utiliza para establecer el valor de desplazamiento horizontal de la sombra del objeto. Puede ser negativo Parámetro 2: el segundo valor de longitud se utiliza para establecer el valor de desplazamiento vertical de la sombra del objeto. Puede ser negativo Parámetro 3: si se proporciona el tercer valor de longitud, se utiliza para establecer el valor de desenfoque de sombra del objeto. No se permiten valores negativos Parámetro 4: Establecer el color de la sombra del objeto

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

¿Cómo logramos el efecto en la imagen de arriba?

Estructura HTML Estilo CSS Estilo de fuente Color de fuente Sombra de texto Luego, echemos un vistazo al código específico:

HTML:

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

CSS:

 .text{ fuente: negrita 100px/1.5 'Microsoft Yahei'; color: dodgerblue;/*text-shadow*/ text-shadow: 10px 10px 50px #000 /*text-shadow: 10px 10px 50px #000,-10px - 10 píxeles 50 píxeles #f00;*/}

Ahora echemos un vistazo a cómo hacer el efecto de la pequeña belleza preguntándome en la parte frontal.

En realidad es muy simple, vayamos directamente al código ~

HTML:

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

CSS:

 cuerpo { fondo: #000; color: #fff;}.text{ fuente: negrita 100px/1.5 georgia, sans-serif;/*Diferentes colores, tamaños de desenfoque de múltiples 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;}

Difunde tu pensamiento. De hecho, los estilos CSS3 son muy interesantes. A veces, con solo un pequeño cambio se pueden lograr efectos geniales^.^

Lo anterior es la introducción del editor al uso de Html5 y CSS para lograr efectos de sombra de texto. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!