⌘K

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

cssselector {
  box-shadow: inset forskyvning_x forskyvning_y uskarphet størrelse_farge;
}
cssselector {
  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: 

html<div id="elem"></div>
css#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): 

html<div id="elem"></div>
css#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: 

html<div id="elem"></div>
css#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): 

html<div id="elem"></div>
css#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): 

html<div id="elem"></div>
css#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: 

html<div id="elem"></div>
css#elem {
  box-shadow: inset 0 0 6px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

Se også

BackEgenskapen text-shadowNextEgenskapen opacity