Cómo colocar la sombra de la caja solo en la parte inferior en CSS?

Para agregar estilo y diseño a texto y elementos, se utiliza el efecto de sombra. Se puede agregar a un elemento con el "sombra de la caja"Propiedad CSS. Al usar comas, puede establecer múltiples efectos a la vez, yo.mi., Sombra horizontal, sombra vertical, desenfoque-radio, etc. Esta propiedad proporciona diferentes características de la imagen utilizando componentes de color.

Este manual proporcionará el método relacionado con la configuración "sombra de la caja"Solo en la parte inferior de un elemento.

Propiedad CSS de caja de cajas

CSS ofrece una propiedad llamada "sombra de la caja"Eso nos permite establecer una sombra en cualquier elemento o imagen. Esta propiedad tiene los siguientes aspectos:

• • offset-x: Se usa para agregar sombra horizontal.
  • offset-y: Se usa para agregar sombra vertical.
  • color: Se usa para establecer el color de la sombra.

Sintaxis

Para aclarar estos puntos, pasemos a la sintaxis de la sombra de caída:

Shadow de caja: Offset-X offset-y Blur-Radius color;

• • offset-x y offset-y serán positivos o negativos.
  • En horizontal, se usa un valor positivo para agregar el efecto en el lado derecho, y un negativo es para el lado izquierdo.
  • En vertical, el valor positivo es para el lado inferior, y lo negativo es para la parte superior.
  • Blur-Radius hace que la sombra sea más brillante o más ligera.
  • En el lugar de color, asignará cualquier color que desee dar a la imagen.

Para una mejor comprensión, implementemos un ejemplo práctico del "sombra de la caja" propiedad.

Ejemplo: cómo colocar la sombra de la caja solo en la parte inferior en CSS?

Aplicaremos el efecto de sombra de la caja a una imagen. Para esto primero, agregaremos una imagen en HTML, y luego aplicaremos la propiedad CSS "sombra de la caja"A eso:

Esto dará la siguiente salida:

Pasemos para agregar un efecto de sombra en la parte inferior de la imagen:

img
Shadow de caja: 0px 15px 5px naranja;

Los valores anteriores representan los siguientes puntos:

• • offset-x es "0px"Porque no queremos mostrar la sombra horizontalmente.
  • offset-y es "15px"Para establecer el ancho de la sombra. Debe ser positivo porque muestra una sombra en la parte inferior de la imagen.
  • Blur-Radius es "5px". Hace que la sombra sea más ligera.
  • El color de la sombra es "naranja".

En esta imagen, podemos ver la sombra en la parte inferior.

Conclusión

Para mostrar la sombra en la parte inferior de la imagen, el "sombra de la cajaSe utiliza la propiedad. Para este propósito, Offset-X se establece como "0", Offset-y es cualquier valor positivo, y el color que desea mostrar también está configurado. Con la ayuda de un ejemplo, este artículo ha explicado cómo mostrar sombras solo en la parte inferior de la imagen.