CSS3 Sombra (Shadows)

Utilice CSS3para aplicar sombras a los elementos.

Utilice CSS3Sombra

CSS3Le permite agregar efectos de sombra a los elementos de la misma manera que en Photoshop, sin necesidad de usar ninguna imagen. En CSS3Antes, las imágenes de rebanadas se utilizaban para crear sombras alrededor de elementos muy molestos.

La próxima sección presentará cómo aplicar sombras a texto y elementos.

CSS3 caja-propiedad de sombra

caja-La propiedad de sombra se puede usar para agregar sombras a los marcos de los elementos. Incluso se puede usar una lista de sombras separada por comas para aplicar múltiples efectos de sombra. La sintaxis básica para crear sombras de cajas se puede expresar de la siguiente manera:

caja-sombra: desplazamiento-x desplazamiento-y difuminado-radio color;

Este box-Los componentes de la propiedad de sombra tienen el siguiente significado:

• desplazamiento-x —Establecer la cantidad de desplazamiento horizontal.

• desplazamiento-y —Establecer el desplazamiento vertical de la sombra.

• difuminado-radio —Establecer el radio de borde difuso. Cuanto mayor sea el valor, mayor será el difuminado, y más borroso será el borde de la sombra. No se permite el uso de valores negativos.

• color —Establecer el color de la sombra. Si se omite o no se especifica el valor del color, se adoptarácolorvalores de la propiedad.

Consulte CSS3 caja-La propiedad de sombra, para obtener más información sobre otros posibles valores.

.caja{
　　　　ancho:　200px;
　　　　alto:　150px;
　　　　fondo: #ccc;
　　　　caja-sombra:　5px　5px　10px; #999;
}

Del mismo modo, puede usar una lista separada por comas para agregar múltiples sombras a múltiples cajas:

.caja{
　　　　ancho:　200px;
　　　　alto:　150px;
　　　　fondo: #000;
　　　　caja-sombra:　5px　5px　10px; rojo,　10px　10px　20px; amarillo;
}

CSS3 texto-propiedad de sombra

Puede usar la propiedad de sombra de texto-La propiedad de sombra se puede aplicar para aplicar efectos de sombra al texto. También se puede usar con-La notación de sombra similar se puede usar para aplicar múltiples sombras al texto.

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