Egenskapen box-shadow

Egenskapen box-shadow setter skygge på en boks. Som verdi tar egenskapen 6 parametere, opplistet med mellomrom, eller nøkkelordet none, som fjerner skyggen helt.

Syntaks

selector {
	box-shadow: inset forskyvning_x forskyvning_y uskarphet størrelse_farge;
}

selector {
	box-shadow: none;
}

Parametere

Parameter	Beskrivelse
`inset`	Valgfri parameter. Hvis den er satt, vil skyggen være inni containeren, hvis ikke - vil den være utenfor.
forskyvning x	Setter forskyvning av skyggen langs X-aksen. Positiv verdi forskyver til høyre, negativ verdi forskyver til venstre.
forskyvning y	Setter forskyvning av skyggen langs Y-aksen. Positiv verdi forskyver nedover, negativ verdi forskyver oppover.
uskarphet	Setter uskarpheten på skyggen. Jo høyere verdi - jo mer uskarp blir skyggen. Valgfri parameter. Hvis ikke satt - vil skyggen være skarp.
størrelse skygge	Setter størrelsen på skyggen. Positiv verdi strekker skyggen, negativ verdi, tvert imot, krymper den. Valgfri parameter. Hvis ikke satt - vil skyggen være av samme størrelse som elementet.
farge	Setter fargen på skyggen i alle enheter for farge. Valgfri parameter. Hvis ikke satt - vil skyggens farge være den samme som tekstfargen.

Forskyvninger langs aksene, uskarphet og størrelse på skyggen settess i alle enheter for størrelser, unntatt prosent.

Eksempel

I dette eksemplet er skyggen forskjøvet nedover og til høyre og det er lagt til litt uskarphet:

<div id="elem"></div>

#elem {
	box-shadow: 5px 5px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Eksempel . Skarp skygge

I dette eksemplet er skyggen forskjøvet nedover og til høyre, men det er ingen uskarphet (skyggen vil være skarp):

<div id="elem"></div>

#elem {
	box-shadow: 2px 2px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Eksempel . Ensartet skygge

I dette eksemplet er ikke skyggen forskjøvet, men den har fått uskarphet:

<div id="elem"></div>

#elem {
	box-shadow: 0px 0px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Eksempel . Størrelse på skygge

I dette eksemplet er ikke skyggen forskjøvet, uskarpheten er null, men den har fått størrelse (svart er rammen, rød er skyggen):

<div id="elem"></div>

#elem {
	box-shadow: 0 0 0 3px red;
	border: 3px solid black;
	width: 300px;
	height: 50px;
}

Eksempel . Uskarphet + størrelse på skygge

I dette eksemplet er ikke skyggen forskjøvet, men den har fått uskarphet og størrelse (svart er rammen, rød er skyggen):

<div id="elem"></div>

#elem {
	box-shadow: 0 0 3px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Eksempel . Indre skygge

I dette eksemplet er skyggen plassert inni containeren:

<div id="elem"></div>

#elem {
	box-shadow: inset 0 0 6px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Se også

egenskapen text-shadow,
som setter skygge på tekst