Hvordan sette bokskygge bare nederst i CSS?

For å legge til stil og design til tekst og elementer, brukes skyggeeffekten. Det kan legges til et element med "Bokseskygge”CSS -eiendom. Ved å bruke komma kan du angi flere effekter samtidig, i.e., Horisontal skygge, vertikal skygge, Blur-Radius, etc. Denne egenskapen gir forskjellige funksjoner i bildet ved hjelp av fargekomponenter.

Denne håndboken vil gi metoden relatert til innstilling "Bokseskygge”Bare i bunnen av et element.

Bokseskygge CSS-eiendom

CSS tilbyr en eiendom som heter “Bokseskygge”Det lar oss sette en skygge til ethvert element eller et bilde. Denne egenskapen har følgende aspekter:

• • offset-x: Det brukes til å legge til horisontal skygge.
  • offset-y: Det brukes til å legge til vertikal skygge.
  • farge: Det brukes til å sette fargen på skyggen.

Syntaks

For å avklare disse punktene, la oss flytte til syntaks av drop-shadow:

Bokseskygge: Offset-X Offset-y Blur-Radius Color;

• • offset-x og offset-y vil være positive eller negative.
  • I horisontal brukes en positiv verdi for å legge til effekten på høyre side, og et negativt er for venstre side.
  • I vertikal er den positive verdien for bunnsiden, og det negative er for toppen.
  • Blur-Radius gjør skyggen lysere eller lettere.
  • I fargestedet vil du tilordne hvilken som helst farge du vil gi til bildet.

For bedre forståelse, la oss implementere et praktisk eksempel på "Bokseskygge”Eiendom.

Eksempel: Hvordan sette bokskygge bare nederst i CSS?

Vi vil bruke Box Shadow -effekten på et bilde. For dette først vil vi legge til et bilde i HTML, og så vil vi bruke CSS -egenskapen “Bokseskygge”Til det:

Dette vil gi følgende utdata:

La oss bevege oss for å legge til en skyggeeffekt på bunnen av bildet:

IMG
Bokseskygge: 0px 15px 5px oransje;

Ovennevnte verdier representerer følgende punkter:

• • offset-x er “0px”Fordi vi ikke ønsker å vise skygge horisontalt.
  • offset-y er “15px”For å sette bredden på skyggen. Det må være positivt fordi det viser en skygge nederst på bildet.
  • Blur-radius er "5px”. Det gjør skyggen lettere.
  • Fargen på skyggen er "oransje”.

I dette bildet kan vi se skygge nederst.

Konklusjon

For å vise skyggen nederst på bildet, “Bokseskygge”Eiendom brukes. For dette formålet er Offset-X satt som “0”, Offset-y er noen positiv verdi, og fargen du vil vise er også angitt. Ved hjelp av et eksempel har denne artikkelen forklart hvordan du bare viser skygger nederst på bildet.