Establecer la sombra del cuadro solo en la parte inferior en CSS

Este artículo presentará conjuntos box-shadow solo en la parte inferior del cuadro en CSS.

Use la propiedad box-shadow para establecer la sombra del cuadro inferior en CSS

Podemos usar la propiedad box-shadow para establecer la sombra solo en la parte inferior del cuadro. La propiedad box-shadow establece la sombra del elemento seleccionado.

La propiedad tiene varias opciones. Primero, comprendamos la propiedad a partir de su sintaxis, que se muestra a continuación.

box-shadow: [h-offset] [v-offset] [blur-radius] [spread-radius] [color];

Es fundamental entender cómo funciona la propiedad box-shadow para implementarla. La opción h-offset establece la sombra en la dirección horizontal del elemento.

El valor positivo establecerá la sombra en la dirección derecha del elemento, mientras que el valor negativo establecerá la sombra en la dirección izquierda del elemento.

Asimismo, la opción v-offset establece la sombra verticalmente. Nuevamente, el valor positivo establece la sombra en la parte inferior, mientras que el valor negativo la establece en la parte superior del elemento.

La opción blur-radius indica el radio de desenfoque de la sombra. A medida que aumenta el radio de desenfoque, la sombra se vuelve más borrosa.

La opción spread-radius establece el tamaño de la sombra del elemento. El valor positivo aumenta el tamaño de la sombra mientras que el valor negativo disminuye.

También podemos usar la opción color para establecer el color de la sombra. Sin embargo, las opciones blur-radius, spread-radius y color son opcionales.

Ahora que hemos aprendido cómo funciona la propiedad box-shadow, es hora de implementarla para crear una sombra inferior en un cuadro.

Para eso, podemos establecer h-offset en 0 y dar algún valor a v-offset. Como resultado, la sombra aparecerá solo en la parte inferior del cuadro.

Por ejemplo, cree un cuadro con una cierta altura y anchura. Establezca la propiedad background-color en black.

A continuación, utilice la propiedad box-shadow para configurar las distintas opciones. Establezca 0 para h-offset, 8px para v-offset, 2px para blur-radius, -2px para spread-radius y el color como gray.

Como resultado, obtenemos un cuadro negro con una sombra gris en la parte inferior. Por lo tanto, aprendimos cómo usar la propiedad box-shadow para establecer la sombra en la parte inferior del cuadro en CSS.

<div class="box">
</div>

.box {
 height:200px;
 width:200px;
 background-color:black;
 box-shadow: 0 8px 2px -2px gray;
}