El efecto de sombra CSS es una propiedad CSS que usamos con frecuencia, pero ¿alguna vez la has entendido cuidadosamente? ¿Solo necesitas copiarlo directamente desde Blue Lake al usarlo? ¿Entiendes cada uno de sus parámetros? ¿Qué hermosos efectos se pueden lograr usando sombras?
Los efectos de sombra se usan a menudo en el diseño web. Los efectos de sombra pueden resaltar un elemento. Antes de la llegada de CSS3, si queríamos agregar efectos de sombra al texto o elementos, necesitábamos usar imágenes para lograrlo, lo cual era muy inconveniente. Después de la aparición de CSS3, podemos agregar efectos de sombra al texto o elementos a través de las dos propiedades de sombra de texto y sombra de cuadro, sin usar ninguna imagen.
1. sombra de texto
Usando la propiedad text-shadow de CSS podemos establecer un efecto de sombra para el texto. La sintaxis de la propiedad es la siguiente:
sombra de texto: offset-xoffset-yblurcolor;
La sintaxis se explica a continuación:
(1) offset-x: parámetro requerido, establece el desplazamiento horizontal de la sombra, que puede ser un valor negativo;
(2) offset-y: parámetro requerido, establece el desplazamiento vertical de la sombra, que puede ser un valor negativo;
(3) desenfoque: parámetro opcional, establece el radio de desenfoque. Cuanto mayor sea el valor, mayor será el desenfoque y más borroso el borde de la sombra. No se permiten valores negativos.
(4) color: parámetro opcional, establece el color de la sombra. Si el valor se omite o no se especifica, se utiliza el valor del atributo de color.
Consejo: Utilice el atributo text-shadow para configurar varios grupos de efectos de sombra al mismo tiempo. Utilice comas para separar cada grupo. Los grupos definidos de efectos de sombra se enumerarán en orden de definición, con la primera sombra en la parte superior. pronto. Además, si desea cancelar el efecto de sombra del texto, puede establecer el valor del atributo text-shadow en ninguno.
[Ejemplo] Utilice el atributo text-shadow para agregar un efecto de sombra al 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 de ejecución:
Análisis: texto-sombra: 5px 8px 3px rojo Descripción del parámetro;
2.box-sombra
Usando la propiedad box-shadow de CSS podemos establecer el efecto de sombra para los elementos HTML. La sintaxis de la propiedad es la siguiente:
box-shadow:h-shadowv-shadowblurspreadcolorinset;
La sintaxis se explica a continuación:
(1) h-shadow: parámetro requerido, establece el desplazamiento en la dirección horizontal de la sombra, que puede ser un valor negativo;
(2) v-shadow: parámetro requerido, establece el desplazamiento en la dirección vertical de la sombra, que puede ser un valor negativo;
(3) desenfoque: parámetro opcional, establece el radio de desenfoque. Cuanto mayor sea el valor, mayor será el desenfoque y más borroso el borde de la sombra. No se permiten valores negativos.
(4) extensión: parámetro opcional, establece el tamaño de la sombra;
(5) color: parámetro opcional, establece el color de la sombra;
(6) recuadro: parámetro opcional, cambia la sombra exterior predeterminada (inicial) a sombra interior.
Consejo: similar al atributo de sombra de texto, el atributo de sombra de cuadro también puede configurar varios grupos de efectos de sombra al mismo tiempo. Utilice comas para separar cada grupo. Los múltiples grupos de efectos de sombra definidos se enumerarán en orden de definición. con la primera sombra al final Arriba, y así sucesivamente.
[Ejemplo] Utilice el atributo box-shadow para agregar un efecto de sombra al texto:
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=ie=edge><title>box-shadow</title></head><style>div :first-child{ancho:200px;alto:200px;border:1pxsolidblack;box-shadow:5px8px3px2pxred;}</style><body><div></div></body></html>Resultados de ejecución:
Análisis: box-shadow: 5px 8px 3px 2px rojo descripción del parámetro;