HTML er det sprog, der bruges til at give strukturen på websider, og CSS tillader os at anvende stilarter på elementerne. På en webside er forskellige egenskabsværdier indstillet til at anvende forskellige typografier, såsom baggrundsfarve, skriftstørrelse, kant, kant-radius, og boks-skygge er en af dem.

Denne blog vil diskutere metoden til at anvende skyggeeffekter på HTML-elementer.

Hvordan dropper man skyggeeffekt på HTML-elementer ved hjælp af CSS?

Det ' kasse-skygge ” egenskab tilføjer en skygge omkring et element, hvor to eller flere tilføjede effektværdier kan adskilles med kommaer.

Syntaksen for egenskaben box-shadow er beskrevet nedenfor.

Syntaks

kasse-skygge : ingen |h-offset v-offset sløring spredningsfarve | indsat | initial | du arver ;

Beskrivelsen af ovennævnte syntaks er anført nedenfor:

“ ingen ”: Det er standardværdien for egenskaben box-shadow.
“ h-forskydning ”: Denne værdi repræsenterer den vandrette afstand.
“ v-offset ”: Denne værdi definerer den lodrette afstand.
“ sløring ”: Den tredje værdi er en sløring. Maksimering af dens værdi vil maksimere sløringseffekten.
“ spredning ”: Den fjerde værdi repræsenterer skyggespredningen. Den kan have positive eller negative værdier, hvor den positive værdi øger spredningen, og en negativ værdi mindsker den.
“ farve ”: Denne værdi er valgfri og repræsenterer den aktuelle farve.
“ initial ”: Denne værdi indstiller egenskaben for dens startværdi.
“ du arver ”: Denne værdi arver egenskaben for dets overordnede element.
“ indsat ”: Den indsatte værdi bruges til at lave skygger inde i boksen.

Lad os se, hvordan skyggeeffekten ser ud gennem et praktisk eksempel.

Eksempel

I HTML-filen skal du først tilføje en '

”. Inden i dette

-element skal du tilføje

- og
-tags for at give indhold til websiden.

HTML

< div >

< h1 > Box Shadow < / h1 >

< s > box-shadow: 3px 8px < / s >

< / div >

Anvend nu CSS-egenskaberne til de tilføjede HTML-elementer.

CSS

div {

kasse-skygge : 3 px 8px ;

}

div-elementet anvendes med egenskaben ' kasse-skygge ' med værdien ' 3px 8px ”, som repræsenterer den vandrette offset og den vertikale offset.

Produktion

I næste afsnit vil HTML-elementerne blive stylet med forskellige egenskaber.

CSS

div {

grænse : 5 px solid rgb ( 255 , 111 , 1 ) ;

kasse-skygge : 3 px 8px 9px 4px #f4af1b ;

}

Følgende er de yderligere CSS-egenskaber, der anvendes på div-elementet:

“ grænse ” egenskaben tildeles værdien 5px solid rgb(255, 111,1) hvor 5px angiver bredden af grænsen, solid repræsenterer grænsens stil, og rgb(255, 111, 1) er farven.
“ kasse-skygge ” egenskab med værdien 3px 8px 9px 4px #f4af1b repræsenterer h-offset som 3px, v-offset som 8px, sløring som 9px, spredt som 4px, og #f4af1b angiver farven.

Den ovenfor angivne kode vil vise div-elementet som vist nedenfor:

Nu, i næste afsnit, skal du oprette to bokse, der repræsenterer to div-elementer. Vi vil give hver enkelt med forskellige multiple box-shadow værdier og observere resultaterne.

HTML

= 'kasse 1' >

> Box Shadow >

> kasse-skygge : 3 px 8px 9px 4px #f4af1b >

> > >

= 'kasse 2' >

> Box Shadow >

> kasse-skygge : 3 px 8px 9px 4px #f4af1b >

>

Style box1 div

#boks1 {

bredde : 40 % ;

højde : 140 px ;

grænse : 5 px solid #ff9c83 ;

kasse-skygge : 8px 10px 15 px 20 px #807f7f ;

}

Her:

“ #boks1 ” bruges til at få adgang til div med id box1.
“ bredde ” egenskaben bruges til indstilling af elementets bredde.
“ højde ” egenskab indstiller elementets højde.
“ grænse ” får værdien 5px solid #ff9c83, hvor 5px angiver bredden af grænsen, solid repræsenterer grænsens stil, og #ff9c83 er farven.
“ kasse-skygge ' egenskab vil blive sat som ' 8px 10px 15px 20px #807f7f ” hvor 8px er vandret offset, 10px er lodret offset, 15px er sløringseffekten, 20px er spredningseffekt, og #807f7f er skyggens farve.

Style box2 div

#boks2 {

bredde : 40 % ;

højde : 140 px ;

grænse : 5 px solid rgb ( 255 , 111 , 1 ) ;

kasse-skygge : indsat 4px 8px #f4af1b ;

margin-venstre : 350 px ;

}

Det kan ses, at vi har stylet box2 div med de samme egenskaber:

Bonustip: Tilføj flere skygger på HTML Element

Det ' kasse-skygge egenskaben kan bruges til at tilføje flere skyggeeffekter til et HTML-element. Dette kan gøres ved hjælp af kommaer mellem hver skygge som vist i nedenstående eksempel:

kasse-skygge : 6px 6px rgb ( 91 , 0 , 143 ) , 12px 5 px rgb ( 201 , 8 , 8 ) , 16 px 16 px 8px rgb ( 226 , 213 , 29 ) ;

Som du kan se, er flere skygger blevet anvendt med succes:

Det var alt om brugen af CSS-grænseskyggen.

Konklusion

Det ' kasse-skygge ” egenskab i CSS bruges til at anvende skyggeeffekter på HTML-elementer. Denne egenskab består hovedsageligt af to værdier, der er for vandret forskydning og vertikal forskydning, men der kan være flere værdier, såsom for sløringseffekt, spredningsradiuseffekt, farve og mere. Desuden kan du også tilføje flere skygger til elementerne ved at bruge kommaer mellem hver box-shadow-egenskab. Denne artikel har forklaret CSS box-shadow-egenskaben med praktiske eksempler.

CSS-kantskygge