Uporablja se za metanje senc (pogosto imenovanih »Odvrni sence«, kot v Photoshopu) iz elementov. Tu je primer z najglobljo možno podporo brskalnika:
.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);- Horizontalni odmik (potreben) sence, pozitiven pomeni, da bo senca na desni strani polja, negativni odmik pa senco na levi strani polja.
- Navpični odmik (potreben) sence, negativni pomeni, da bo škatla-senca nad poljem, pozitivna pa, da bo senca pod poljem.
- Polmer zameglitve (obvezen), če je senca nastavljena na 0, bo ostra, večja kot je številka, bolj zamegljena bo in senca se bo še bolj širila. Na primer senca s 5px vodoravnega odmika, ki ima tudi polmer zamegljenosti 5px, bo 10px celotne sence.
- Polmer širjenja (neobvezno), pozitivne vrednosti povečajo velikost sence, negativne vrednosti zmanjšajo velikost. Privzeto je 0 (senca je enaka velikosti zameglitve).
- Barva (obvezna) - zavzame katero koli barvno vrednost, na primer šestnajstiška, imenovana, rgba ali hsla. Če je barvna vrednost izpuščena, so v ospredju (besedilo
color) narisane sence polja . Upoštevajte pa, da starejši brskalniki WebKit (pred Chrome 20 in Safari 6) pravilo prezrejo, če je barva izpuščena.
Uporaba polprozorne barve, kot rgba(0, 0, 0, 0.4)je najpogostejša, je prijeten učinek, saj ne pokriva popolnoma / neprozorno konca, ampak omogoča, da se tisto, kar je spodaj, nekoliko prikaže skozi pravo senco.
Primer
Notranja senca
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Primer
Internet Explorer (8 in manj) Box Shadow
Potrebujete dodaten element, vendar je izvedljiv 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; )Samo za eno stran
Z negativnim polmerom širjenja lahko senco škatle stisnete in jo potisnete samo z enega roba škatle.
.one-edge-shadow ( box-shadow: 0 8px 6px -6px black; )Več meja in več
Polje-senco lahko ločite z vejico poljubno večkrat. To na primer prikazuje dve senci z različnimi položaji in različnimi barvami na istem elementu:
box-shadow: inset 5px 5px 10px #000000, inset -5px -5px 10px blue;Primer prikazuje, kako lahko to uporabite za ustvarjanje več obrob:
Oglejte si Pen Multiple box-shadow coolness! Chris Coyier (@chriscoyier) na CodePen.
Z uporabo senc na psevdoelemente, s katerimi nato manipulirate, lahko dobite nekaj čudovitih 3D senčil v obliki 3D:
Oglejte si Pen CSS3 Box Shadows Effects avtorja Halil İbrahim Nuroğlu (@haibnu) na CodePen.
Super gladke sence z več vrednostmi, ločenimi z vejico:
Oglejte si
gladko škatlo s pisalom Chrisa Coyierja (@chriscoyier)
na CodePen.
Podpora za brskalnik
Podrobnosti o pokritosti predpone ponudnika najdete v delčku na vrhu strani. To je ena tistih lastnosti, pri katerih je spuščanje predpon v tem trenutku precej smiselno.