CSS box-shadow egenskab

Definition og brug

box-shadow-egenskaben tilføjer en eller flere skygger til rammen.

Tip:Brug border-image-*-egenskaberne til at oprette smukke, tilpasningsfaste knapper!

Se også:

CSS3 tutorial:CSS3 Kanter

HTML DOM referencehåndbog:boxShadow-egenskab

Eksempel

Tilføj box-shadow til div-elementet:

div
{
box-shadow: 10px 10px 5px #888888;
}

Prøv det selv

Der er flere eksempler nederst på siden.

CSS-syntaks

box-shadow: h-shadow v-shadow blur spread color inset;

Bemærkninger:box-shadow tilføjer en eller flere skygger til rammen. Egenskaben er en liste over skygger adskilt af kommaer, hvor hver skygge defineres af 2-4 længdeværdier, valgfri farveværdier og valgfri 'inset'-nøgleord. Udeladte længdeværdier er 0.

Egenskabsværdi

Værdi Beskrivelse Test
h-shadow Obligatorisk. Horisontal skyggeposition. Tillader negative værdier. Test
v-shadow Obligatorisk. Vertikal skyggeposition. Tillader negative værdier. Test
blur Valgfri. Blurs afstand. Test
spread Valgfri. Skyggens størrelse. Test
color Valgfri. Skyggens farve. Se CSS-farveværdier. Test
inset Valgfri. Skift ekstern skygge (outset) til intern skygge. Test

Tekniske detaljer

Standardværdi: ingen
Arvbarhed: nej
Version: CSS3
JavaScript-syntaks: object.style.boxShadow="10px 10px 5px #888888"

Flere eksempler

Billede, der er kastet på bordet
Dette eksempel viser, hvordan du opretter et 'Polaroid'-billede og roterer billedet.

Browserunderstøttelse

Tal i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

Tal med -webkit- eller -moz- som præfiks indikerer den første version, der bruger præfikset.

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 9.0 4.0
3.5 -moz-		 5.1
3.1 -webkit-		 10.5