CSS-egenskaben `box-shadow` tilføjer skyggeeffekter omkring et element. Dette kan bruges til at tilføje dybde og dimension til et element eller få det til at skille sig ud fra resten af indholdet på en side.
Egenskaben "box-shadow" tager op til fire værdier, som specificerer forskydning, sløring og spredning af skyggen og farven på skyggen.
1. Offset :Forskydningsværdierne angiver den vandrette og lodrette afstand af skyggen fra elementet. Positive værdier flytter skyggen til højre og ned, mens negative værdier flytter skyggen til venstre og op.
2. Slør :Sløringsværdien angiver mængden af sløring på skyggen. En højere sløringsværdi vil skabe en blødere skygge, mens en lavere sløringsværdi vil skabe en skarpere skygge.
3. Spredning :Spredningsværdien angiver mængden af spredning, der anvendes på skyggen. En højere spredningsværdi vil skabe en bredere skygge, mens en lavere spredningsværdi vil skabe en smallere skygge.
4. Farve :Farveværdien angiver farven på skyggen. Du kan bruge enhver gyldig CSS-farveværdi, såsom en navngivet farve, en hex-værdi eller en RGB-værdi.
Her er nogle eksempler på, hvordan du bruger egenskaben "box-shadow" til at skabe forskellige typer skygger:
- Grundlæggende skygge :
```css
box-shadow:5px 5px 5px #888888;
```
Dette vil skabe en skygge, der er 5 pixels forskudt i både vandret og lodret retning, har en sløring på 5 pixels og er spredt med 5 pixels. Skyggen vil være en grå nuance.
- Indsat skygge :
```css
box-shadow:indsat 5px 5px 5px #888888;
```
Dette vil skabe en indsat skygge, hvilket betyder, at skyggen vil blive tegnet inde i elementet i stedet for uden for det. Skyggen vil have samme størrelse og form som elementet, og den vil være en grå nuance.
- Flere skygger :
```css
box-shadow:5px 5px 5px #888888, 10px 10px 10px #444444;
```
Dette vil skabe to skygger, den ene med en større offset og sløring end den anden. Skyggerne vil begge være grå nuancer, men den anden skygge vil være mørkere end den første.
Du kan bruge egenskaben `box-shadow` til at skabe en bred vifte af skygger, som kan bruges til at tilføje dybde og dimension til dine designs. Eksperimenter med forskellige værdier for at se, hvilke effekter du kan skabe.
