CSS Box Shadow
- Página anterior Sombra de CSS
- Página siguiente Efectos de texto CSS
Propiedad box-shadow CSS
CSS box-shadow Atributo aplica sombra al elemento.
La forma más sencilla es especificar solo la sombra horizontal y vertical:
Elemento <div> amarillo con box-shadow negro
Ejemplo
div {
box-shadow: 10px 10px;
}
A continuación, agregue un color a la sombra:
Elemento <div> amarillo con box-shadow gris
Ejemplo
div {
box-shadow: 10px 10px gris;
}
A continuación, agregue un efecto borroso a la sombra:
Elemento <div> amarillo, con box-shadow borroso
Ejemplo
div {
box-shadow: 10px 10px 5px gris;
}
tarjeta
También puede usar box-shadow Efecto de creación de tarjeta en papel:
1
1 de enero de 2021
Café
Ejemplo
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
Prueba práctica: tarjeta de papelPrueba práctica: tarjeta de imagen
Propiedades de sombra CSS
La siguiente tabla enumera las propiedades de sombra de CSS:
| Atributo | Descripción |
|---|---|
| box-shadow | Añadir una o más sombras a un elemento. |
| text-shadow | Añadir una o más sombras en el texto. |
- Página anterior Sombra de CSS
- Página siguiente Efectos de texto CSS
