Definición de .box-shadow aplicado en CSS
La propiedad .box-shadow en CSS es para poner sombras en elementos (a veces denominados «sombras de caída», ala photoshop/figma).
Caso de empleo de la propiedad box-shadow
Si quieres emplear esta propiedad de CSS en tu hoja styles.css, hazlo de esta manera:
.card {
box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}Otro ejemplo más avanzado de .box-shadow es el siguiente de CODEPEN:
Sintaxis de .box-shadow en CSS
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;Valores
| Valor | Descripción | Manifestación |
|---|---|---|
| ninguna | Valor por defecto. No se muestra ninguna sombra | |
| desplazamiento h | Requerido. El desplazamiento horizontal de la sombra. Un valor positivo pone la sombra en el lado derecho del cuadro, un valor negativo pone la sombra en el lado izquierdo del cuadro | |
| desplazamiento en v | Requerido. El desplazamiento vertical de la sombra. Un valor positivo pone la sombra debajo del cuadro, un valor negativo pone la sombra encima del cuadro | |
| difuminar | Opcional. El radio de desenfoque. Cuanto mayor sea el número, más borrosa será la sombra | |
| untado | Opcional. El radio de propagación. Un valor positivo aumenta el tamaño de la sombra, un valor negativo disminuye el tamaño de la sombra | |
| color | Opcional. El color de la sombra. El valor predeterminado es el color del texto. Busque una lista completa de posibles valores de color. Nota: En Safari (en PC) se requiere el parámetro de color. Si no especifica el color, la sombra no se muestra en absoluto. | |
| recuadro | Opcional. Cambia la sombra de una sombra exterior (interior) a una sombra interior | |
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .box-shadow
Los números de la tabla especifican la primera versión del navegador que es completamente compatible con la propiedad.
Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- | 8.0 | 29.0 2.0 -moz- | 5.1 3.2 -webkit- | 9.5 |
