Egenskapen box-shadow

Egenskapen box-shadow sätter en skugga på ett block. Som värde tar egenskapen 6 parametrar, uppräknade med mellanslag, eller nyckelordet none, som tar bort skuggan helt.

Syntax

cssselector {
  box-shadow: inset förskjutning_x förskjutning_y utsuddning storlek_på_skugga färg;
}

cssselector {
  box-shadow: none;
}

Parametrar

Parameter	Beskrivning
`inset`	Valfri parameter. Om den anges kommer skuggan att vara innanför containern, om den inte anges - utanför.
förskjutning x	Sätter förskjutningen av skuggan längs X-axeln. Positivt värde förskjuter åt höger, negativt - åt vänster.
förskjutning y	Sätter förskjutningen av skuggan längs Y-axeln. Positivt värde förskjuter nedåt, negativt - uppåt.
utsuddning	Sätter utsuddningen av skuggan. Ju högre värde - desto mer utsuddad blir skuggan. Valfri parameter. Om den inte anges - kommer skuggan att vara skarp.
storlek på skugga	Sätter storleken på skuggan. Positivt värde sträcker ut skuggan, negativt värde, tvärtom, komprimerar den. Valfri parameter. Om den inte anges - kommer skuggan att ha samma storlek som elementet.
färg	Sätter färgen på skuggan i valfria enheter för färg. Valfri parameter. Om den inte anges - är skuggans färg samma som textens färg.

Förskjutningar längs axlarna, utsuddning och storlek på skugga anges i valfria enheter för storlekar, förutom procent.

Exempel

I detta exempel är skuggan förskjuten nedåt och åt höger och en liten utsuddning har lagts till:

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

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

Результат:

Exempel . Skarp skugga

I detta exempel är skuggan förskjuten nedåt och åt höger, men det finns ingen utsuddning (skuggan kommer att vara skarp):

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

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

Результат:

Exempel . Enhetlig skugga

I detta exempel är skuggan inte förskjuten, men en utsuddning har lagts till:

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

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

Результат:

Exempel . Storlek på skugga

I detta exempel är skuggan inte förskjuten, utsuddningen är noll, men en storlek har lagts till (det svarta är kantlinjen, det röda är skuggan):

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

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

Результат:

Exempel . Utsuddning + storlek på skugga

I detta exempel är skuggan inte förskjuten, men utsuddning och storlek har lagts till (det svarta är kantlinjen, det röda är skuggan):

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

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

Результат:

Exempel . Inre skugga

I detta exempel finns skuggan innanför containern:

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

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

Результат:

Se även

egenskapen text-shadow,
som sätter en skugga på text