CSS-egenskapen `box-shadow` legger til skyggeeffekter rundt et element. Dette kan brukes til å legge til dybde og dimensjon til et element, eller for å få det til å skille seg ut fra resten av innholdet på en side.
"Box-shadow"-egenskapen tar opptil fire verdier, som spesifiserer forskyvning, uskarphet og spredning av skyggen, og fargen på skyggen.
1. Offset :Forskyvningsverdiene spesifiserer den horisontale og vertikale avstanden til skyggen fra elementet. Positive verdier flytter skyggen til høyre og ned, mens negative verdier flytter skyggen til venstre og opp.
2. Uskarp :Uskarphet-verdien angir mengden uskarphet som brukes på skyggen. En høyere uskarphet verdi vil skape en mykere skygge, mens en lavere uskarphet verdi vil skape en skarpere skygge.
3. Spredning :Spredningsverdien spesifiserer mengden spredning som brukes på skyggen. En høyere spredningsverdi vil skape en bredere skygge, mens en lavere spredningsverdi vil skape en smalere skygge.
4. Farge :Fargeverdien spesifiserer fargen på skyggen. Du kan bruke hvilken som helst gyldig CSS-fargeverdi, for eksempel en navngitt farge, en hex-verdi eller en RGB-verdi.
Her er noen eksempler på hvordan du bruker "box-shadow"-egenskapen for å lage forskjellige typer skygger:
- Grunnleggende skygge :
```css
box-shadow:5px 5px 5px #888888;
```
Dette vil skape en skygge som er 5 piksler forskjøvet i både horisontal og vertikal retning, har en uskarphet på 5 piksler og spres med 5 piksler. Skyggen vil være en nyanse av grå.
- Innsatt skygge :
```css
box-shadow:innfelt 5px 5px 5px #888888;
```
Dette vil skape en innfelt skygge, som betyr at skyggen vil bli tegnet inne i elementet i stedet for utenfor det. Skyggen vil ha samme størrelse og form som elementet, og det vil være en nyanse av grått.
- Flere skygger :
```css
box-shadow:5px 5px 5px #888888, 10px 10px 10px #444444;
```
Dette vil skape to skygger, en med større forskyvning og uskarphet enn den andre. Skyggene vil begge være gråtoner, men den andre skyggen vil være mørkere enn den første.
Du kan bruke egenskapen "box-shadow" til å lage et bredt utvalg av skygger, som kan brukes til å legge til dybde og dimensjon til designene dine. Eksperimenter med ulike verdier for å se hvilke effekter du kan skape.
