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. Du kan använda vilket giltigt CSS-färgvärde som helst, till exempel en namngiven färg, ett hexadecimalt värde eller ett RGB-värde.
Här är några exempel på hur du använder egenskapen `box-shadow` för att skapa olika typer av skuggor:
- Grundläggande skugga :
``` css
box-shadow:5px 5px 5px #888888;
```
Detta kommer att skapa en skugga som är 5 pixlar förskjuten i både horisontell och vertikal riktning, har en oskärpa på 5 pixlar och sprids med 5 pixlar. Skuggan kommer att vara en nyans av grått.
- Infogad skugga :
``` css
box-shadow:infälld 5px 5px 5px #888888;
```
Detta kommer att skapa en infälld skugga, vilket innebär att skuggan kommer att ritas inuti elementet istället för utanför det. Skuggan kommer att ha samma storlek och form som elementet, och den kommer att vara en grå nyans.
- Flera skuggor :
``` css
box-shadow:5px 5px 5px #888888, 10px 10px 10px #444444;
```
Detta kommer att skapa två skuggor, en med en större offset och oskärpa än den andra. Skuggorna kommer båda att vara grå nyanser, men den andra skuggan kommer att vara mörkare än den första.
Du kan använda egenskapen "box-shadow" för att skapa en mängd olika skuggor, som kan användas för att lägga till djup och dimension till dina mönster. Experimentera med olika värden för att se vilka effekter du kan skapa.
