Come impostare la casella Shadow solo in fondo in CSS?

Per aggiungere stile e design a testo ed elementi, viene utilizzato l'effetto ombra. Può essere aggiunto a un elemento con "Box-Shadow"Proprietà CSS. Usando le virgole, puoi impostare più effetti contemporaneamente, i.e., Ombra orizzontale, ombra verticale, radia sfocata, ecc. Questa proprietà fornisce diverse caratteristiche dell'immagine utilizzando i componenti a colori.

Questo manuale fornirà il metodo relativo all'impostazione "Box-Shadow"Solo in fondo a un elemento.

Proprietà CSS Box-Shadow

CSS offre una proprietà chiamata "Box-Shadow"Questo ci consente di impostare un'ombra su qualsiasi elemento o immagine. Questa proprietà ha i seguenti aspetti:

• • offset-x: È usato per aggiungere un'ombra orizzontale.
  • offset-y: È usato per aggiungere un'ombra verticale.
  • colore: È usato per impostare il colore dell'ombra.

Sintassi

Per chiarire questi punti, passiamo alla sintassi di Drop-Shadow:

Box-Shadow: Offset-X Offset-Y Blur-Radius Color;

• • offset-x e offset-y saranno positivi o negativi.
  • In orizzontale, viene utilizzato un valore positivo per aggiungere l'effetto sul lato destro e un negativo è per il lato sinistro.
  • In verticale, il valore positivo è per il lato inferiore e il negativo è per la parte superiore.
  • Blur-radius rende l'ombra più luminosa o più chiara.
  • Nel luogo del colore, assegnerai qualsiasi colore che desideri dare all'immagine.

Per una migliore comprensione, implementiamo un esempio pratico di "Box-Shadow" proprietà.

Esempio: come impostare la casella ombra solo in fondo in CSS?

Applicheremo l'effetto Shadow Box su un'immagine. Per questo prima, aggiungeremo un'immagine in HTML, quindi applicheremo la proprietà CSS "Box-Shadow"A esso:

Questo darà il seguente output:

Andiamo per aggiungere un effetto ombra sul fondo dell'immagine:

img
Box-Shadow: 0px 15px 5px Orange;

I valori di cui sopra rappresentano i seguenti punti:

• • offset-x è "0px"Perché non vogliamo visualizzare l'ombra in orizzontale.
  • offset-y è "15px"Per impostare la larghezza dell'ombra. Deve essere positivo perché mostra un'ombra nella parte inferiore dell'immagine.
  • Blur-radius è "5px". Rende l'ombra più leggera.
  • Il colore dell'ombra è "arancia".

In questa immagine, possiamo vedere l'ombra in basso.

Conclusione

Per visualizzare l'ombra nella parte inferiore dell'immagine, il "Box-Shadow"La proprietà viene utilizzata. A tale scopo, Offset-X è impostato come "0", Offset-y è un valore positivo e è anche impostato il colore che si desidera visualizzare. Con l'aiuto di un esempio, questo articolo ha spiegato come visualizzare le ombre solo nella parte inferiore dell'immagine.