Eigenschap box-shadow

De eigenschap box-shadow geeft een schaduw aan een blok. Als waarde accepteert de eigenschap 6 parameters, gescheiden door spaties, of het sleutelwoord none, wat de schaduw volledig verwijdert.

Syntaxis

selector {
	box-shadow: inset verschuiving_x verschuiving_y vervaging grootte_schaduw kleur;
}

selector {
	box-shadow: none;
}

Parameters

Parameter	Beschrijving
`inset`	Optionele parameter. Indien opgegeven, zal de schaduw binnen de container zijn, zo niet - dan erbuiten.
verschuiving x	Bepaalt de verschuiving van de schaduw langs de X-as. Een positieve waarde verschuift naar rechts, een negatieve waarde naar links.
verschuiving y	Bepaalt de verschuiving van de schaduw langs de Y-as. Een positieve waarde verschuift naar beneden, een negatieve waarde naar boven.
vervaging	Bepaalt de vervaging van de schaduw. Hoe groter de waarde, hoe waziger de schaduw zal zijn. Optionele parameter. Indien niet opgegeven - zal de schaduw scherp zijn.
grootte schaduw	Bepaalt de grootte van de schaduw. Een positieve waarde rekt de schaduw uit, een negatieve waarde verkleint deze daarentegen. Optionele parameter. Indien niet opgegeven - zal de schaduw dezelfde grootte hebben als het element.
kleur	Bepaalt de kleur van de schaduw in alle kleureenheden. Optionele parameter. Indien niet opgegeven - is de kleur van de schaduw hetzelfde als de tekstkleur.

Verschuivingen langs de assen, vervaging en grootte van de schaduw worden opgegeven in alle eenheden voor afmetingen, behalve percentages.

Voorbeeld

In dit voorbeeld is de schaduw naar beneden en naar rechts verschoven en is er een kleine vervaging toegevoegd:

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

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

Voorbeeld . Scherpe schaduw

In dit voorbeeld is de schaduw naar beneden en naar rechts verschoven, maar er is geen vervaging (de schaduw zal scherp zijn):

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

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

Voorbeeld . Gelijkmatige schaduw

In dit voorbeeld is de schaduw niet verschoven, maar er is vervaging aan toegevoegd:

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

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

Voorbeeld . Grootte van de schaduw

In dit voorbeeld is de schaduw niet verschoven, de vervaging is nul, maar er is een grootte aan toegevoegd (het zwarte is de rand, het rode is de schaduw):

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

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

Voorbeeld . Vervaging + grootte schaduw

In dit voorbeeld is de schaduw niet verschoven, maar er zijn vervaging en grootte aan toegevoegd (het zwarte is de rand, het rode is de schaduw):

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

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

Voorbeeld . Innerlijke schaduw

In dit voorbeeld bevindt de schaduw zich binnen de container:

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

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

Zie ook

de eigenschap text-shadow,
die een schaduw aan tekst geeft