⌘K

Savybė box-shadow

Savybė box-shadow nustato šešėlį blokui. Kaip reikšmę savybė priima 6 parametrus, išvardintus per tarpą, arba raktažodį none, kuris visiškai panaikina šešėlį.

Sintaksė

cssselektorius {
  box-shadow: inset poslinkis_x_kryptimi poslinkis_y_kryptymi išsiliejimas šešėlio_dydis spalva;
}
cssselektorius {
  box-shadow: none;
}

Parametrai

Parametras Aprašas
inset Neprivalomas parametras.
Jei jis nurodytas, šešėlis bus konteinerio viduje, jei nenurodytas - išorėje.
poslinkis x kryptimi Nustato šešėlio poslinkį X ašyje.
Teigiama reikšmė pastumia į dešinę, neigiama - į kairę.
poslinkis y kryptimi Nustato šešėlio poslinkį Y ašyje.
Teigiama reikšmė pastumia žemyn, neigiama - aukštyn.
išsiliejimas Nustato šešėlio išsiliejimą.
Kuo didesnė reikšmė - tuo labiau išsilietęs bus šešėlis.
Neprivalomas parametras. Jei nenurodytas - šešėlis bus ryškus.
šešėlio dydis Nustato šešėlio dydį.
Teigiama reikšmė ištempia šešėlį, neigiama, priešingai, jį suspaudžia.
Neprivalomas parametras. Jei nenurodytas - šešėlis bus tokio pat dydžio kaip ir elementas.
spalva Nustato šešėlio spalvą bet kokiame spalvų vienetų formate.
Neprivalomas parametras. Jei nenurodytas - šešėlio spalva sutampa su teksto spalva.

Poslinkiai išilgai ašių, išsiliejimas ir šešėlio dydis nurodomi bet kokiame dydžio vienetų formate, išskyrus procentus.

Pavyzdys

Šiame pavyzdyje šešėlis pastumtas žemyn ir į dešinę ir pridėtas nedidelis išsiliejimas: 

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

Результат:

Pavyzdys . Ryškus šešėlis

Šiame pavyzdyje šešėlis pastumtas žemyn ir į dešinę, bet išsiliejimo nėra (šešėlis bus ryškus): 

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

Результат:

Pavyzdys . Tolygus šešėlis

Šiame pavyzdyje šešėlis nepastumtas, bet prie jo pridėtas išsiliejimas: 

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

Результат:

Pavyzdys . Šešėlio dydis

Šiame pavyzdyje šešėlis nepastumtas, išsiliejimas lygus nuliui, bet prie jo pridėtas dydis (juoda - tai rėmelis, raudona - tai šešėlis): 

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

Результат:

Pavyzdys . Išsiliejimas + šešėlio dydis

Šiame pavyzdyje šešėlis nepastumtas, bet prie jo pridėti išsiliejimas ir dydis (juoda - tai rėmelis, raudona - tai šešėlis): 

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

Результат:

Pavyzdys . Vidinis šešėlis

Šiame pavyzdyje šešėlis yra konteinerio viduje: 

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

Результат:

Taip pat žiūrėkite

BackSavybė text-shadowNextSavybė opacity