Lära Lägga till skuggor för djup och stil | Lägga till Dekorativa Effekter med CSS

Vi kan använda box-skuggor för att skapa en visuell effekt där ett element ser ut att sväva ovanför bakgrunden. Denna effekt kan skapa djup, framhäva specifika element och tillföra visuell intresse till en webbsida. För att uppnå detta kan vi använda egenskapen box-shadow.

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

offset-x avser skuggans horisontella positionering, där ett positivt värde flyttar skuggan till höger om elementet och ett negativt värde flyttar den till vänster;
offset-y avser skuggans vertikala positionering, där ett positivt värde flyttar skuggan nedåt och ett negativt värde flyttar den uppåt;
blur-radius anger graden av oskärpa för skuggan och är ett valfritt värde, där ett högre värde ger en mer suddig skugga;
spread-radius är också valfritt och ökar eller minskar skuggans storlek beroende på om värdet är positivt eller negativt;
color specificerar skuggans färg med valfritt giltigt färgformat och är också ett valfritt värde.

index.html

index.css

Observera

För att hitta den mest lämpliga skuggan, besök källan skugg-generator.

Förutom box-shadow kan egenskaperna text-shadow och drop-shadow användas för att skapa skuggor för text respektive andra element. Dessa fungerar på samma sätt som egenskapen box-shadow. Dock används dessa egenskaper mer sällan jämfört med box-shadow.

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 5. Kapitel 5

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Suggested prompts:

Can you show me some examples of box-shadow usage?

What are some best practices for using shadows in web design?

How do I use text-shadow and drop-shadow in CSS?

Awesome!

Completion rate improved to 2.56

Svep för att visa menyn