CSS-egenskapen `box-shadow` lägger till skuggeffekter runt ett element. Detta kan användas för att lägga till djup och dimension till ett element, eller för att få det att sticka ut från resten av innehållet på en sida.
Egenskapen "box-shadow" tar upp till fyra värden, som anger förskjutning, oskärpa och spridning av skuggan och färgen på skuggan.
1. Offset :Offsetvärdena anger det horisontella och vertikala avståndet för skuggan från elementet. Positiva värden flyttar skuggan åt höger och nedåt, medan negativa värden flyttar skuggan åt vänster och uppåt.
2. Oskärpa :Oskärpa värdet anger mängden oskärpa som tillämpas på skuggan. Ett högre oskärpavärde skapar en mjukare skugga, medan ett lägre oskärpavärde skapar en skarpare skugga.
3. Sprid :Spridningsvärdet anger mängden spridning som tillämpas på skuggan. Ett högre spridningsvärde skapar en bredare skugga, medan ett lägre spridningsvärde skapar en smalare skugga.
4. Färg :Färgvärdet anger färgen på skuggan. Alla giltiga CSS-färgvärden kan användas.
Här är några exempel på hur du använder egenskapen `box-shadow` för att skapa olika typer av skuggor:
- För att skapa en enkel skugga, använd ett positivt offsetvärde och ett lågt oskärpavärde, så här:
``` css
box-shadow:5px 5px 5px #888888;
```
- För att skapa en mjukare skugga, öka oskärpa värdet så här:
``` css
box-shadow:5px 5px 10px #888888;
```
- För att skapa en bredare skugga, öka spridningsvärdet så här:
``` css
box-shadow:5px 5px 10px 5px #888888;
```
- För att skapa en färgad skugga, ange ett färgvärde, så här:
``` css
box-shadow:5px 5px 10px 5px röd;
```
Egenskapen "box-shadow" är ett kraftfullt verktyg som kan användas för att skapa en mängd olika visuella effekter. Experimentera med olika värden för att se vad du kan skapa!
