A HTML a weboldalak szerkezetének biztosítására használt nyelv, a CSS pedig lehetővé teszi, hogy stílusokat alkalmazzunk az elemekre. Egy weboldalon különböző tulajdonságértékek vannak beállítva a különböző stílusok alkalmazásához, például a háttérszín, a betűméret, a keret, a szegélysugár és a box-shadow ezek egyike.

Ez a blog az árnyékhatások HTML-elemekre történő alkalmazásának módszerét tárgyalja.

Hogyan lehet árnyékhatást hozni a HTML-elemekre CSS használatával?

Az ' doboz-árnyék ” tulajdonság árnyékot ad egy elem köré, ahol két vagy több hozzáadott hatásérték vesszővel választható el.

A box-shadow tulajdonság szintaxisát az alábbiakban ismertetjük.

Szintaxis

doboz-árnyék : egyik sem |h-offset v-offset blur spread color | betét | a kezdeti | örököl ;

A fent említett szintaxis leírása az alábbiakban található:

' egyik sem ”: Ez a box-shadow tulajdonság alapértelmezett értéke.
' h-eltolás ”: Ez az érték a vízszintes távolságot jelenti.
' v-eltolás ”: Ez az érték határozza meg a függőleges távolságot.
' elhomályosít ”: A harmadik érték az elmosódás. Értékének maximalizálása maximalizálja az elmosódást.
' terjedés ”: A negyedik érték az árnyék terjedését jelenti. Tartalmazhat pozitív vagy negatív értékeket, ahol a pozitív érték növeli, a negatív érték pedig csökkenti.
' szín ”: Ez az érték nem kötelező, az aktuális színt jelöli.
' a kezdeti ”: Ez az érték a kezdeti érték tulajdonságát állítja be.
' örököl ”: Ez az érték örökli a szülőelemének tulajdonságát.
' betét ”: A beillesztett érték a dobozon belüli árnyékok létrehozására szolgál.

Lássuk, hogyan néz ki az árnyékhatás egy gyakorlati példán keresztül.

Példa

A HTML fájlban először adjon hozzá egy „

”. Ezen a

elemen belül adjon hozzá

és
címkéket, hogy tartalmat biztosítson a weboldalon.

HTML

< div >

< h1 > A doboz árnyéka < / h1 >

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

< / div >

Most alkalmazza a CSS-tulajdonságokat a hozzáadott HTML-elemekre.

CSS

div {

doboz-árnyék : 3 képpont 8 képpont ;

}

A div elem a ' tulajdonsággal kerül alkalmazásra doboz-árnyék ' értékkel ' 3 képpont 8 képpont ”, amely a vízszintes és a függőleges eltolást jelenti.

Kimenet

A következő részben a HTML-elemek különböző tulajdonságokkal lesznek stílusozva.

CSS

div {

határ : 5 képpont szilárd rgb ( 255 , 111 , 1 ) ;

doboz-árnyék : 3 képpont 8 képpont 9 képpont 4 képpont #f4af1b ;

}

A div elemre alkalmazott további CSS-tulajdonságok a következők:

' határ ” tulajdonsághoz az 5px solid rgb(255, 111,1) értéke van hozzárendelve, ahol az 5px a szegély szélességét, a solid a szegély stílusát, az rgb(255, 111, 1) pedig a színét.
' doboz-árnyék ” tulajdonság 3px 8px 9px 4px értékkel. Az #f4af1b a h-eltolást 3px-ként, a v-eltolást 8px-ként, a blur-t 9px-ként, a szórást 4px-ként, az #f4af1b pedig a színt adja meg.

A fent megadott kód az alábbiak szerint jeleníti meg a div elemet:

Most a következő részben hozzon létre két négyzetet, amelyek két div elemet képviselnek. Mindegyikhez különböző többszörös box-shadow értékeket adunk, és megfigyeljük az eredményeket.

HTML

= 'box1' >

> A dobozárnyék >

> doboz-árnyék : 3 képpont 8 képpont 9 képpont 4 képpont #f4af1b >

> > >

= 'doboz2' >

> A dobozárnyék >

> doboz-árnyék : 3 képpont 8 képpont 9 képpont 4 képpont #f4af1b >

>

Stílus box1 div

#box1 {

szélesség : 40% ;

magasság : 140 képpont ;

határ : 5 képpont szilárd #ff9c83 ;

doboz-árnyék : 8 képpont 10 képpont 15 képpont 20 képpont #807f7f ;

}

Itt:

' #box1 ” a div azonosítójú box1 eléréséhez használható.
' szélesség ” tulajdonságot használjuk az elem szélességének beállítására.
' magasság ” tulajdonság beállítja az elem magasságát.
' határ ” értéke 5px szilárd #ff9c83, ahol az 5px a szegély szélességét, a szilárd a szegély stílusát, az #ff9c83 pedig a színt jelöli.
' doboz-árnyék ' tulajdonság '' lesz 8px 10px 15px 20px #807f7f ” ahol a 8 képpont a vízszintes eltolás, a 10 képpont a függőleges eltolás, a 15 képpont az elmosódási effektus, a 20 képpont a szórt hatás, és a #807f7f az árnyék színe.

Stílus box2 div

#doboz2 {

szélesség : 40% ;

magasság : 140 képpont ;

határ : 5 képpont szilárd rgb ( 255 , 111 , 1 ) ;

doboz-árnyék : betét 4 képpont 8 képpont #f4af1b ;

margó-bal : 350 képpont ;

}

Megfigyelhető, hogy a box2 div-t ugyanazokkal a tulajdonságokkal alakítottuk ki:

Bónusztipp: Több árnyék hozzáadása a HTML elemhez

Az ' doboz-árnyék ” tulajdonság felhasználható több árnyékeffektus hozzáadására egy HTML-elemhez. Ezt megteheti vesszővel az egyes árnyékok között, az alábbi példában látható módon:

doboz-árnyék : 6 képpont 6 képpont rgb ( 91 , 0 , 143 ) , 12 képpont 5 képpont rgb ( 201 , 8 , 8 ) , 16 képpont 16 képpont 8 képpont rgb ( 226 , 213 , 29 ) ;

Mint látható, több árnyékot is sikeresen alkalmaztak:

Ez a CSS határárnyék használatáról szólt.

Következtetés

Az ' doboz-árnyék ” tulajdonság a CSS-ben árnyékeffektusok HTML-elemekre történő alkalmazására szolgál. Ez a tulajdonság főleg két értékből áll, amelyek a vízszintes és a függőleges eltolásokhoz tartoznak, de több érték is lehet, például az elmosódási hatás, a szórási sugár effektusa, a szín stb. Ezenkívül több árnyékot is hozzáadhat az elemekhez, ha vesszőt használ az egyes box-shadow tulajdonságok között. Ez a cikk gyakorlati példákkal magyarázza a CSS box-shadow tulajdonságát.

CSS határ árnyék