Lære Legge til Skygger for Dybde og Stil | Legge til Dekorative Effekter med CSS

Vi kan bruke boks-skygger for å skape en visuell effekt der et element ser ut til å sveve over bakgrunnen. Denne effekten kan gi dybde, fremheve spesifikke elementer og tilføre visuell interesse til en nettside. For å oppnå dette kan vi bruke box-shadow-egenskapen.

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color;

offset-x angir den horisontale plasseringen av skyggen, der en positiv verdi flytter skyggen til høyre for elementet og en negativ verdi flytter den til venstre;
offset-y angir den vertikale plasseringen av skyggen, der en positiv verdi flytter skyggen nedover og en negativ verdi flytter den oppover;
blur-radius bestemmer graden av uskarphet for skyggen og er en valgfri verdi; en høyere verdi gir en mer uklar skygge;
spread-radius er også valgfri, og øker eller minsker størrelsen på skyggen basert på positiv eller negativ verdi;
color spesifiserer fargen på skyggen ved bruk av et hvilket som helst gyldig fargeformat, og er også en valgfri verdi.

index.html

index.css

Merk

For å finne den mest passende skyggen, besøk kilden skyggegenerator.

I tillegg til box-shadow, gjør egenskapene text-shadow og drop-shadow det mulig å lage skygger for henholdsvis tekst og andre elementer. De fungerer på samme måte som box-shadow-egenskapen. Likevel brukes disse egenskapene sjeldnere sammenlignet med box-shadow.

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 5. Kapittel 5

Spør AI

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Suggested prompts:

Can you show me an example of how to use the box-shadow property in CSS?

What are some common use cases for box-shadow on a webpage?

How do I choose the right values for box-shadow to achieve a realistic floating effect?

Sveip for å vise menyen

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color;