CSS Box Shadow
Vlastnost CSS box-shadow
Vlastnost CSS box-shadow
se používá k aplikaci jednoho nebo více stínů na prvek.
Určete horizontální a vertikální stín
Při jeho nejjednodušším použití určíte pouze vodorovný a svislý stín. Výchozí barvou stínu je aktuální barva textu.
Příklad
Určete vodorovný a svislý stín:
div
{
box-shadow: 10px 10px;
}
Určete barvu stínu
Parametr color
definuje barvu stínu.
Příklad
Určete barvu stínu:
div
{
box-shadow: 10px 10px grey;
}
Přidejte ke stínu efekt rozostření
Parametr blur
definuje poloměr rozostření. Čím vyšší číslo, tím více bude stín rozmazaný.
Příklad
Přidejte do stínu efekt rozostření:
div
{
box-shadow: 10px 10px 5px grey;
}
Nastavte poloměr šíření stínu
Parametr spread
definuje poloměr šíření. Kladná hodnota zvětšuje velikost stínu, záporná hodnota zmenšuje velikost stínu.
Příklad
Nastavte poloměr šíření stínu:
div
{
box-shadow: 10px 10px 5px 12px grey;
}
Nastavte vložený parametr
Parametr inset
mění stín z vnějšího stínu (začátek) na vnitřní stín.
Příklad
Přidejte vložený parametr:
div
{
box-shadow: 10px 10px 5px grey inset;
}
Přidat více stínů
Prvek může mít také více stínů:
Příklad
div
{
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}
karty
Vlastnost můžete také použít box-shadow
k vytvoření papírových karet:
1
1. ledna 2021
Hardanger, Norsko
Příklad
div.card
{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0,
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align:
center;
}
CSS Shadow Properties
The following table lists the CSS shadow properties:
Property | Description |
---|---|
box-shadow | Adds one or more shadows to an element |
text-shadow | Adds one or more shadows to a text |