Egenskaben box-shadow

Egenskaben box-shadow angiver en skygge for en blok. Som værdi tager egenskaben 6 parametre, opremset med mellemrum, eller nøgleordet none, som helt fjerner skyggen.

Syntaks

selektor {
	box-shadow: inset forskydning_x forskydning_y udslætning størrelse_skygge farve;
}

selektor {
	box-shadow: none;
}

Parametre

Parameter	Beskrivelse
`inset`	Valgfri parameter. Hvis den er angivet, vil skyggen være inde i containeren, hvis ikke - udenfor.
forskydning x	Angiver forskydning af skyggen langs X-aksen. En positiv værdi forskydder til højre, en negativ værdi til venstre.
forskydning y	Angiver forskydning af skyggen langs Y-aksen. En positiv værdi forskydder nedad, en negativ værdi opad.
udslætning	Angiver udslætningen af skyggen. Jo højere værdi, desto mere udslættet vil skyggen være. Valgfri parameter. Hvis ikke angivet, vil skyggen være skarp.
størrelse skygge	Angiver størrelsen på skyggen. En positiv værdi strækker skyggen, en negativ værdi, modsat, trækker den sammen. Valgfri parameter. Hvis ikke angivet, vil skyggen have samme størrelse som elementet.
farve	Angiver skyggens farve i enhver farveenhed. Valgfri parameter. Hvis ikke angivet, er skyggens farve den samme som tekstens farve.

Forskydninger langs akserne, udslætning og størrelse på skyggen angives i enhver størrelsesenhed, undtgen procenter.

Eksempel

I dette eksempel er skyggen forskudt ned og til højre og der er tilføjet en lille udslætning:

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

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

Eksempel . Skarp skygge

I dette eksempel er skyggen forskudt ned og til højre, men der er ingen udslætning (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 eksempel er skyggen ikke forskudt, men der er tilføjet udslætning:

<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 eksempel er skyggen ikke forskudt, udslætning er nul, men der er tilføjet en størrelse (sort er kanten, 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 . Udslætning + størrelse på skygge

I dette eksempel er skyggen ikke forskudt, men der er tilføjet udslætning og størrelse (sort er kanten, 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 eksempel befinder skyggen sig inde i containeren:

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

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

Se også

egenskaben text-shadow,
som angiver skygge for tekst