Lastnost box-shadow

Lastnost box-shadow določa senco bloku. Kot vrednost lastnost sprejme 6 parametrov, naštetih s presledkom, ali ključno besedo none, ki senco popolnoma prekliče.

Sintaksa

cssselektor {
  box-shadow: inset pomik_po_x pomik_po_y zameglitev velikost_sence barva;
}

cssselektor {
  box-shadow: none;
}

Parametri

Parameter	Opis
`inset`	Neobvezen parameter. Če je določen, bo senca znotraj kontejnerja, če ni določen - bo zunaj.
pomik po x	Določa premik sence po osi X. Pozitivna vrednost pomakne v desno, negativna - v levo.
pomik po y	Določa premik sence po osi Y. Pozitivna vrednost pomakne navzdol, negativna - navzgor.
zameglitev	Določa zameglitev sence. Višja kot je vrednost - bolj zamegljena bo senca. Neobvezen parameter. Če ni določen - bo senca ostra.
velikost sence	Določa velikost sence. Pozitivna vrednost raztegne senco, negativna vrednost jo skrči. Neobvezen parameter. Če ni določen - bo senca enake velikosti kot element.
barva	Določa barvo sence v poljubnih enotah za barvo. Neobvezen parameter. Če ni določen - barva sence ustreza barvi besedila.

Pomiki po oseh, zameglitev in velikost sence se določajo v poljubnih enotah za velikosti, razen v odstotkih.

Primer

V tem primeru je senca premaknjena navzdol in v desno in je dodano rahlo zamegljevanje:

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

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

Результат:

Primer . Ostra senca

V tem primeru je senca premaknjena navzdol in v desno, vendar ni zameglitve (senca bo ostra):

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

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

Результат:

Primer . Enakomerna senca

V tem primeru senca ni premaknjena, vendar je dodano zamegljevanje:

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

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

Результат:

Primer . Velikost sence

V tem primeru senca ni premaknjena, zameglitev je enaka nič, vendar je dodana velikost (črna je obroba, rdeča je senca):

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

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

Результат:

Primer . Zameglitev + velikost sence

V tem primeru senca ni premaknjena, vendar so ji dodani zameglitev in velikost (črna je obroba, rdeča je senca):

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

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

Результат:

Primer . Notranja senca

V tem primeru je senca znotraj kontejnerja:

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

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

Результат:

Glejte tudi

lastnost text-shadow,
ki določa senco besedilu