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, ö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

Notering

För att hitta den mest lämpliga skuggan, besök källan shadow 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. De fungerar på samma sätt som egenskapen box-shadow. Dessa egenskaper används dock 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 an example of how to use the box-shadow property in CSS?

What are some common use cases for box-shadow on a webpage?

How do I choose the right values for box-shadow to achieve a realistic floating effect?

Svep för att visa menyn

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