Používa sa na vrhanie tieňov (často nazývaných „Vrhané tiene“, ako vo Photoshope) z prvkov. Tu je príklad s najhlbšou možnou podporou prehľadávača:
.shadow ( -webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */ box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ )To je:
box-shadow: (horizontal offset) (vertical offset) (blur radius) (optional spread radius) (color);- Vodorovné odsadenie (požadované) tieňa, kladné, znamená, že tieň bude vpravo od rámčeka, záporné odsadenie umiestni tieň do ľavej časti rámčeka.
- Vertikálne odsadenie (požadované) tieňa, záporné znamená, že tieň poľa bude nad rámčekom, kladné znamená, že tieň bude pod rámčekom.
- Ak je polomer rozmazania (povinný), ak je nastavený na 0, bude tieň ostrý, čím vyššie číslo, tým viac bude rozmazaný a tieň sa bude rozširovať ďalej. Napríklad tieň s horizontálnym odsadením 5 pixelov, ktorý má tiež polomer rozmazania 5 pixelov, bude mať 10 pixelov celkového tieňa.
- Polomer šírenia (voliteľné), kladné hodnoty zväčšia veľkosť tieňa, záporné hodnoty zmenšia veľkosť. Predvolená hodnota je 0 (tieň má rovnakú veľkosť ako rozmazanie).
- Farba (požadovaná) - použije akúkoľvek hodnotu farby, napríklad hex, pomenovanú, rgba alebo hsla. Ak je hodnota farby vynechaná, tiene polí sa nakreslia farbou popredia (text
color). Upozorňujeme, že staršie prehliadače WebKit (pre Chrome 20 a Safari 6) ignorujú pravidlo, keď je farba vynechaná.
rgba(0, 0, 0, 0.4)Najčastejšie je použitie polopriehľadnej farby , ktorá má pekný efekt, pretože úplne / nepriehľadne nezakrýva to, čo skončilo, ale umožňuje, aby sa to, čo je pod nimi, trochu prejavilo, ako skutočný tieň.
Príklad
Vnútorný tieň
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Príklad
Tieň okienka v programe Internet Explorer (8 a starší)
Potrebujete ďalší prvok, ale je to možné filter.
Box-shadowed element .shadow1 ( margin: 40px; background-color: rgb(68,68,68); /* Needed for IEs */ -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; zoom: 1; ) .shadow1 .content ( position: relative; /* This protects the inner element from being blurred */ padding: 100px; background-color: #DDD; )Iba na jednej strane
Pomocou negatívneho polomeru šírenia môžete vtesnať do tieňa poľa a odtlačiť ho iba od jedného okraja poľa.
.one-edge-shadow ( box-shadow: 0 8px 6px -6px black; )Viaceré hranice a ďalšie
Tieň rámčeka môžete kedykoľvek oddeliť čiarkou, koľkokrát chcete. Toto napríklad zobrazuje dva tiene s rôznymi pozíciami a rôznymi farbami na rovnakom prvku:
box-shadow: inset 5px 5px 10px #000000, inset -5px -5px 10px blue;Príklad ukazuje, ako to môžete použiť na vytvorenie viacerých ohraničení:
Pozerajte sa na chladenie v tieni viacnásobného boxu! autor Chris Coyier (@chriscoyier) na stránke CodePen.
Aplikáciou tieňov na pseudo prvky, s ktorými potom manipulujete, môžete získať pekné 3D efektne vyzerajúce tiene škatúľ:
Pozrite si efekty Pen CSS3 Box Shadows Effects od Halila İbrahima Nuroğlu (@haibnu) na stránkach CodePen.
Super hladké tiene pomocou viacerých hodnôt oddelených čiarkami:
Prezrite si
hladký box-tieň pera od Chrisa Coyiera (@chriscoyier)
na CodePen.
Podpora prehľadávača
Podrobnosti o pokrytí predpôn dodávateľa nájdete v úryvku v hornej časti stránky. Toto je jedna z vlastností, kde je v tomto okamihu celkom vhodné zrušiť predpony.