⌘K

Vlastnost box-shadow

Vlastnost box-shadow nastavuje stín bloku. Jako hodnota přijímá vlastnost 6 parametrů, uvedených mezerou, nebo klíčové slovo none, které stín úplně zruší.

Syntaxe

cssselektor {
  box-shadow: inset posunuti_po_x posunuti_po_y rozostreni velikost_stinu barva;
}
cssselektor {
  box-shadow: none;
}

Parametry

Parametr Popis
inset Nepovinný parametr.
Pokud je zadán, stín bude uvnitř kontejneru, pokud není zadán - bude vně.
posunuti po x Nastavuje posunutí stínu podél osy X.
Kladná hodnota posouvá doprava, záporná - doleva.
posunuti po y Nastavuje posunutí stínu podél osy Y.
Kladná hodnota posouvá dolů, záporná - nahoru.
rozostreni Nastavuje rozostření stínu.
Čím větší hodnota - tím více rozostřený stín bude.
Nepovinný parametr. Pokud není zadán - stín bude ostrý.
velikost stinu Nastavuje velikost stínu.
Kladná hodnota roztahuje stín, záporná hodnota, naopak, jej stlačuje.
Nepovinný parametr. Pokud není zadán - stín bude stejné velikosti jako prvek.
barva Nastavuje barvu stínu v libovolných jednotkách pro barvu.
Nepovinný parametr. Pokud není zadán - barva stínu odpovídá barvě textu.

Posunutí podél os, rozostření a velikost stínu se nastavují v libovolných jednotkách pro velikosti, kromě procent.

Příklad

V tomto příkladu je stín posunut dolů a doprava a přidáno malé rozostření: 

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

Результат:

Příklad . Ostrý stín

V tomto příkladu je stín posunut dolů a doprava, ale není rozostřen (stín bude ostrý): 

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

Результат:

Příklad . Rovnoměrný stín

V tomto příkladu není stín posunut, ale je k němu přidáno rozostření: 

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

Результат:

Příklad . Velikost stínu

V tomto příkladu není stín posunut, rozostření je nulové, ale je k němu přidána velikost (černá - to je ohraničení, červená - to je stín): 

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

Результат:

Příklad . Rozostření + velikost stínu

V tomto příkladu není stín posunut, ale je k němu přidáno rozostření a velikost (černá - to je ohraničení, červená - to je stín): 

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

Результат:

Příklad . Vnitřní stín

V tomto příkladu je stín uvnitř kontejneru: 

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

Результат:

Viz také

BackVlastnost text-shadowNextVlastnost opacity