La propiedad box-shadow
La propiedad box-shadow se utiliza para aplicar una o más sombras a un elemento.
Especifique una sombra horizontal y vertical
En su uso más simple, solo especifica una sombra horizontal y una vertical. El color predeterminado de la sombra es el color del texto actual.
Ejemplo:
Especifique una sombra horizontal y una vertical:
div {
box-shadow: 10px 10px;
}
Especifique un color para la sombra
El parámetro color define el color de la sombra.
Ejemplo:
Especifique un color para la sombra:
div {
box-shadow: 10px 10px lightblue;
}
Agregue un efecto blur a la sombra
El parámetro de desenfoque define el radio de desenfoque. Cuanto mayor sea el número, más borrosa será la sombra.
Ejemplo:
Agregue un efecto de desenfoque a la sombra:
div {
box-shadow: 10px 10px 5px lightblue;
}
Radio de propagación de la sombra
El parámetro spread define el radio de dispersión. Un valor positivo aumenta el tamaño de la sombra, un valor negativo disminuye el tamaño de la sombra.
Ejemplo:
Establezca el radio de propagación de la sombra:
div {
box-shadow: 10px 10px 5px 12px lightblue;
}
Establecer el parámetro de inserción
El parámetro inset cambia la sombra de una sombra exterior (interior) a una sombra interior.
Ejemplo:
Agregue el parámetro inset:
div {
box-shadow: 10px 10px 5px lightblue inset;
}
Agregue múltiples sombras
Un elemento también puede tener varias sombras:
Ejemplo:
div {
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}
Tarjetas
También puedes usar la propiedad box-shadow para crear tarjetas:
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;
}
Todas las propiedades
La siguiente tabla enumera las propiedades de la sombra CSS:
| Propiedad | Descripción |
box-shadow | Agregue una o más sombras a un elemento. |
text-shadow | Agregue una o más sombras a un texto. |
Traducido con 💚 desde W3Schools.com