HTML är det språk som används för att tillhandahålla strukturen på webbsidor, och CSS tillåter oss att tillämpa stilar på elementen. På en webbsida är olika egenskapsvärden inställda för att tillämpa olika stilar, som bakgrundsfärg, teckenstorlek, kantlinje, ramradie och box-skugga är en av dem.

Den här bloggen kommer att diskutera metoden för att tillämpa skuggeffekter på HTML-element.

Hur man släpper skuggeffekt på HTML-element med CSS?

den ' box-skugga ”-egenskapen lägger till en skugga runt ett element där två eller flera adderade effektvärden kan separeras med kommatecken.

Syntaxen för egenskapen box-shadow beskrivs nedan.

Syntax

box-skugga : ingen |h-offset v-offset oskärpa spridningsfärg | infälld | första | du ärver ;

Beskrivningen av ovan nämnda syntax listas nedan:

' ingen ”: Det är standardvärdet för egenskapen box-shadow.
' h-offset ”: Detta värde representerar det horisontella avståndet.
' v-offset ”: Detta värde definierar det vertikala avståndet.
' fläck ”: Det tredje värdet är en oskärpa. Maximering av dess värde kommer att maximera oskärpa effekten.
' spridning ”: Det fjärde värdet representerar skuggspridningen. Det kan hålla positiva eller negativa värden, där det positiva värdet ökar spridningen och ett negativt värde minskar den.
' Färg ”: Detta värde är valfritt och representerar den aktuella färgen.
' första ”: Detta värde anger egenskapen för dess initiala värde.
' du ärver ”: Detta värde ärver egenskapen för dess överordnade element.
' infälld ”: Insättningsvärdet används för att skapa skuggor inuti rutan.

Låt oss se hur skuggeffekten ser ut genom ett praktiskt exempel.

Exempel

I HTML-filen lägger du först till ett '

”. Inuti detta

-element lägger du till

- och
-taggar för att tillhandahålla innehåll till webbsidan.

HTML

< div >

< h1 > Boxskuggan < / h1 >

< sid > box-skugga: 3px 8px < / sid >

< / div >

Tillämpa nu CSS-egenskaperna på de tillagda HTML-elementen.

CSS

div {

box-skugga : 3 px 8px ;

}

div-elementet tillämpas med egenskapen ' box-skugga ' med värdet ' 3px 8px ”, som representerar horisontell offset och vertikal offset.

Produktion

I nästa avsnitt kommer HTML-elementen att utformas med olika egenskaper.

CSS

div {

gräns : 5 px fast rgb ( 255 , 111 , 1 ) ;

box-skugga : 3 px 8px 9px 4px #f4af1b ;

}

Följande är de ytterligare CSS-egenskaper som tillämpas på div-elementet:

' gräns ”-egenskapen tilldelas värdet 5px solid rgb(255, 111,1) där 5px indikerar kantens bredd, solid representerar kantens stil och rgb(255, 111, 1) är färgen.
' box-skugga ” egenskap med värdet 3px 8px 9px 4px #f4af1b representerar h-offset som 3px, v-offset som 8px, blur som 9px, spridning som 4px och #f4af1b anger färgen.

Den ovan angivna koden kommer att visa div-elementet som visas nedan:

Nu, i nästa avsnitt, skapa två rutor som representerar två div-element. Vi kommer att ge var och en med olika multipla box-skuggvärden och observera resultaten.

HTML

= 'box1' >

> Box Shadow >

> box-skugga : 3 px 8px 9px 4px #f4af1b >

> > >

= 'box2' >

> Box Shadow >

> box-skugga : 3 px 8px 9px 4px #f4af1b >

>

Style box1 div

#box1 {

bredd : 40 % ;

höjd : 140 pixlar ;

gräns : 5 px fast #ff9c83 ;

box-skugga : 8px 10px 15 px 20px #807f7f ;

}

Här:

' #box1 ” används för att komma åt div med id box1.
' bredd ”-egenskapen används för att ställa in elementets bredd.
' höjd egenskapen anger elementets höjd.
' gräns ” ges värdet 5px fast #ff9c83 där 5px indikerar kantens bredd, solid representerar kantens stil och #ff9c83 är färgen.
' box-skugga ' egenskapen kommer att ställas in som ' 8px 10px 15px 20px #807f7f ” där 8px är horisontell offset, 10px är vertikal offset, 15px är oskärpa effekten, 20px är spridningseffekt och #807f7f är skuggans färg.

Style box2 div

#box2 {

bredd : 40 % ;

höjd : 140 pixlar ;

gräns : 5 px fast rgb ( 255 , 111 , 1 ) ;

box-skugga : infälld 4px 8px #f4af1b ;

marginal-vänster : 350 pixlar ;

}

Det kan observeras att vi har formaterat box2 div med samma egenskaper:

Bonustips: Lägg till flera skuggor på HTML-element

den ' box-skugga ”-egenskapen kan användas för att lägga till flera skuggeffekter till ett HTML-element. Detta kan göras med kommatecken mellan varje skugga som visas i exemplet nedan:

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

Som du kan se har flera skuggor applicerats framgångsrikt:

Det handlade om användningen av CSS-gränsskuggan.

Slutsats

den ' box-skugga ”-egenskapen i CSS används för att applicera skuggeffekter på HTML-element. Den här egenskapen består huvudsakligen av två värden som är för horisontell offset och vertikal offset, men det kan finnas flera värden som för oskärpa effekt, spridningsradieeffekt, färg och mer. Dessutom kan du också lägga till flera skuggor till elementen genom att använda kommatecken mellan varje box-shadow-egenskap. Den här artikeln har förklarat CSS box-shadow-egenskapen med praktiska exempel.

CSS-kantskugga