Ominaisuus box-shadow

Ominaisuus box-shadow asettaa varjon lohkolle. Arvona ominaisuus ottaa 6 parametria, lueteltuna välilyönnillä erotettuna, tai avainsanan none, joka poistaa varjon kokonaan.

Syntaksi

cssvalitsija {
  box-shadow: inset siirto_x_akselilla siirto_y_akselilla sumeus varjon_koko varjon_vari;
}

cssvalitsija {
  box-shadow: none;
}

Parametrit

Parametri	Kuvaus
`inset`	Valinnainen parametri. Jos se on annettu, varjo on kontin sisällä, jos ei annettu - niin ulkopuolella.
siirto x-akselilla	Asettaa varjon siirron X-akselilla. Positiivinen arvo siirtää oikealle, negatiivinen - vasemmalle.
siirto y-akselilla	Asettaa varjon siirron Y-akselilla. Positiivinen arvo siirtää alas, negatiivinen - ylös.
sumeus	Asettaa varjon sumeuden. Mitä suurempi arvo - sitä sumeampi varjo on. Valinnainen parametri. Jos ei annettu - varjo on terävä.
varjon koko	Asettaa varjon koon. Positiivinen arvo venyttää varjoa, negatiivinen arvo päinvastoin, kutistaa sen. Valinnainen parametri. Jos ei annettu - varjo on saman koon kuin elementti.
väri	Asettaa varjon värin missä tahansa väriyksiköissä. Valinnainen parametri. Jos ei annettu - varjon väri on sama kuin tekstin väri.

Siirrot akseleilla, sumeus ja varjon koko asetetaan missä tahansa koko-yksiköissä, paitsi prosenteissa.

Esimerkki

Tässä esimerkissä varjo on siirretty alas ja oikealle ja siihen on lisätty pieni sumeus:

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

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

Результат:

Esimerkki . Terävä varjo

Tässä esimerkissä varjo on siirretty alas ja oikealle, mutta sumeutta ei ole (varjo on terävä):

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

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

Результат:

Esimerkki . Tasainen varjo

Tässä esimerkissä varjoa ei ole siirretty, mutta siihen on lisätty sumeus:

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

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

Результат:

Esimerkki . Varjon koko

Tässä esimerkissä varjoa ei ole siirretty, sumeus on nolla, mutta siihen on lisätty koko (musta on reuna, punainen on varjo):

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

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

Результат:

Esimerkki . Sumeus + varjon koko

Tässä esimerkissä varjoa ei ole siirretty, mutta siihen on lisätty sumeus ja koko (musta on reuna, punainen on varjo):

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

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

Результат:

Esimerkki . Sisäinen varjo

Tässä esimerkissä varjo on kontin sisällä:

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

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

Результат:

Katso myös

ominaisuus text-shadow,
joka asettaa varjon tekstille