Ako vytvoriť tiene boxu pomocou CSS?

Vlastnosť CSS `box-shadow` pridáva tieňové efekty okolo prvku. Dá sa to použiť na pridanie hĺbky a rozmerov prvku alebo na to, aby sa odlišoval od zvyšku obsahu na stránke.

Vlastnosť „box-shadow“ má až štyri hodnoty, ktoré určujú odsadenie, rozostrenie a rozloženie tieňa a farbu tieňa.

1. Odsadenie :Hodnoty posunu určujú horizontálnu a vertikálnu vzdialenosť tieňa od prvku. Kladné hodnoty posúvajú tieň doprava a nadol, zatiaľ čo záporné hodnoty posúvajú tieň doľava a nahor.

2. Rozmazať :Hodnota rozostrenia určuje mieru rozmazania aplikovaného na tieň. Vyššia hodnota rozostrenia vytvorí jemnejší tieň, zatiaľ čo nižšia hodnota rozostrenia vytvorí ostrejší tieň.

3. Rozšírte :Hodnota spreadu určuje množstvo spreadu aplikovaného na tieň. Vyššia hodnota spreadu vytvorí širší tieň, zatiaľ čo nižšia hodnota spreadu vytvorí užší tieň.

4. Farba :Hodnota farby určuje farbu tieňa. Je možné použiť akúkoľvek platnú hodnotu farby CSS.

Tu je niekoľko príkladov, ako použiť vlastnosť „box-shadow“ na vytvorenie rôznych typov tieňov:

- Ak chcete vytvoriť jednoduchý vrhnutý tieň, použite kladnú hodnotu posunu a nízku hodnotu rozmazania, ako je tento:

```css

box-shadow:5px 5px 5px #888888;

```

- Ak chcete vytvoriť jemnejší tieň, zvýšte hodnotu rozmazania takto:

```css

box-shadow:5px 5px 10px #888888;

```

- Ak chcete vytvoriť širší tieň, zvýšte hodnotu spreadu takto:

```css

box-shadow:5px 5px 10px 5px #888888;

```

- Ak chcete vytvoriť farebný tieň, zadajte hodnotu farby takto:

```css

box-shadow:5px 5px 10px 5px červená;

```

Vlastnosť `box-shadow` je výkonný nástroj, ktorý možno použiť na vytváranie rôznych vizuálnych efektov. Experimentujte s rôznymi hodnotami, aby ste videli, čo môžete vytvoriť!

• Predchádzajúca strana: Ako identifikovať akúkoľvek skladbu online bez znalosti textu? 
• Ďalšia strana: Ako vytvoriť reklamnú jednotku AdSense?