Eienskap box-shadow

Die eienskap box-shadow ken 'n skaduwee aan 'n blok toe. As waarde neem die eienskap 6 parameters aan, wat met 'n spasie geskei word, of die sleutelwoord none, wat die skaduwee heeltemal uitskakel.

Sintaksis

selektor {
	box-shadow: inset verskuiwing_op_x verskuiwing_op_y vervaaging grootte_skaduwee kleur;
}

selektor {
	box-shadow: none;
}

Parameters

Parameter	Beskrywing
`inset`	Opsionele parameter. Indien gespesifiseer, sal die skaduwee binne die houer wees, indien nie - dan buite.
verskuiwing op x	Spesifiseer die skaduwee se verskuiwing op die X-as. 'n Positiewe waarde skuif na regs, 'n negatiewe waarde - na links.
verskuiwing op y	Spesifiseer die skaduwee se verskuiwing op die Y-as. 'n Positiewe waarde skuif afwaarts, 'n negatiewe waarde - opwaarts.
vervaaging	Spesifiseer die skaduwee se vervaaging. Hoe groter die waarde - hoe meer vervaag die skaduwee sal wees. Opsionele parameter. Indien nie gespesifiseer nie - sal die skaduwee skerp wees.
grootte skaduwee	Spesifiseer die skaduwee se grootte. 'n Positiewe waarde rek die skaduwee uit, 'n negatiewe waarde, daarenteen, krimp dit saam. Opsionele parameter. Indien nie gespesifiseer nie - sal die skaduwee van dieselfde grootte as die element wees.
kleur	Spesifiseer die skaduwee se kleur in enige eenhede vir kleur. Opsionele parameter. Indien nie gespesifiseer nie - stem die skaduwee se kleur ooreen met die tekskleur.

Verskuiwings op die asse, vervaaging en grootte van die skaduwee word gespesifiseer in enige eenhede vir groottes, behalwe persentasies.

Voorbeeld

In hierdie voorbeeld is die skaduwee af en regs geskuif en is 'n effense vervaaging bygevoeg:

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

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

Voorbeeld . Skerp skaduwee

In hierdie voorbeeld is die skaduwee af en regs geskuif, maar daar is geen vervaaging nie (die skaduwee sal skerp wees):

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

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

Voorbeeld . Gelykmatige skaduwee

In hierdie voorbeeld is die skaduwee nie geskuif nie, maar daar is vervaaging bygevoeg:

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

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

Voorbeeld . Grootte van skaduwee

In hierdie voorbeeld is die skaduwee nie geskuif nie, vervaaging is nul, maar grootte is bygevoeg (swart - is die rand, rooi - is die skaduwee):

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

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

Voorbeeld . Vervaaging + grootte van skaduwee

In hierdie voorbeeld is die skaduwee nie geskuif nie, maar daar is vervaaging en grootte bygevoeg (swart - is die rand, rooi - is die skaduwee):

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

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

Voorbeeld . Interne skaduwee

In hierdie voorbeeld is die skaduwee binne die houer geleë:

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

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

Sien ook

die eienskap text-shadow,
wat 'n skaduwee aan teks toeken