Vitajte na [www.pocitac.win] Pripojiť k domovskej stránke Obľúbené stránky
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. Môžete použiť akúkoľvek platnú hodnotu farby CSS, ako je napríklad pomenovaná farba, hexadecimálna hodnota alebo hodnota RGB.
Tu je niekoľko príkladov, ako použiť vlastnosť „box-shadow“ na vytvorenie rôznych typov tieňov:
- Základný tieň :
```css
box-shadow:5px 5px 5px #888888;
```
Tým sa vytvorí tieň, ktorý je posunutý o 5 pixelov v horizontálnom aj vertikálnom smere, má rozmazanie 5 pixelov a je rozšírený o 5 pixelov. Tieň bude mať odtieň sivej.
- Vložený tieň :
```css
box-shadow:inset 5px 5px 5px #888888;
```
Tým sa vytvorí vložený tieň, čo znamená, že tieň bude nakreslený vnútri prvku a nie mimo neho. Tieň bude mať rovnakú veľkosť a tvar ako prvok a bude mať odtieň sivej.
- Viaceré tiene :
```css
box-shadow:5px 5px 5px #888888, 10px 10px 10px #444444;
```
Tým sa vytvoria dva tiene, jeden s väčším posunom a rozmazaním ako druhý. Tiene budú oba odtiene sivej, ale druhý tieň bude tmavší ako prvý.
Vlastnosť „box-shadow“ môžete použiť na vytvorenie širokej škály tieňov, ktoré možno použiť na pridanie hĺbky a rozmerov vašim návrhom. Experimentujte s rôznymi hodnotami, aby ste videli, aké efekty môžete vytvoriť.