Jak vytvořit stín pro webovou tabulku

Přidání stínu do tabulky na vaší webové stránce může dát trochu více pop. S vlastností "box-shadow" CSS3 můžete přidat libovolný prvek pole bez nutnosti použít obrázky. Vlastnost box-shadow funguje ve všech hlavních prohlížečích podporujících CSS3. Když do tabulky přidáte tabulkový stín, vytvoří se stín pod celou tabulkou. Stín se nevztahuje na jednotlivé řádky nebo buňky v tabulce.

1.

Přidejte do tabulky prvek CSS3 box-shadow. Pokud pro tabulku používáte ID nebo třídu, můžete k němu přidat prvek pole stínu. Pokud na vaší stránce máte pouze jednu tabulku nebo pokud chcete, aby každá tabulka měla stejný styl, můžete ve stylu listu zahrnout definici tabulky. Například:

tabulka {šířka: 50%; box-stín: 1px 1px 1px #CCCCCC; }}

Pokud nemáte na tabulku použit žádný jiný styl CSS, nejjednodušší metodou je použít atribut "styl" v tagu následujícím způsobem:

2.

Nastavte horizontální a vertikální polohu stínu s prvními dvěma hodnotami prvku. To jsou pouze dva požadované prvky. Volitelně můžete přidat třetí hodnotu pro nastavení rozostření stínu a čtvrtý pro velikost stínu. Můžete také přidat volitelnou barvu pro svůj stín. Celkově, váš nejsložitější stín by vypadal takto:

tabulka {box-shadow: 2px 2px 4px 4px # 8CCCC8; }}

3.

Uložte svou stránku a poté ji zobrazte ve webovém prohlížeči, abyste viděli stín. Stíny mohou být jemné; změnou velikosti pixelem nebo změnou barvy stínu může být rozdíl mezi jemným vylepšením a sýrovým efektem.

Tip

  • Stíny lze také použít na buňky a řádky v tabulce.

Varování

  • Vlastnost box-shadow nefunguje s verzemi aplikace Internet Explorer 8 a nižší. V těchto prohlížečích se tabulka jednoduše vykreslí bez stínu.
 

Zanechte Svůj Komentář