Se folosește pentru a arunca umbre (denumite adesea „Drop Shadows”, ca în Photoshop) din elemente. Iată un exemplu cu cel mai profund suport posibil pentru browser:
.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 */ )Asta este:
box-shadow: (horizontal offset) (vertical offset) (blur radius) (optional spread radius) (color);- Decalajul orizontal (obligatoriu) al umbrei, pozitiv înseamnă că umbra va fi în dreapta casetei, un decalaj negativ va pune umbra în stânga casetei.
- Decalajul vertical (necesar) al umbrei, unul negativ înseamnă că umbra-cutie va fi deasupra casetei, una pozitivă înseamnă că umbra va fi sub casetă.
- Raza de estompare (necesară), dacă este setată la 0, umbra va fi ascuțită, cu cât este mai mare numărul, cu atât va fi mai neclară și cu cât umbra se va extinde mai departe. De exemplu, o umbră cu offset orizontal de 5 px care are și o rază de estompare de 5 px va fi de 10 px de umbră totală.
- Raza de răspândire (opțional), valorile pozitive cresc dimensiunea umbrei, valorile negative scad dimensiunea. Valoarea implicită este 0 (umbra are aceeași dimensiune ca neclaritatea).
- Culoare (obligatoriu) - ia orice valoare de culoare, cum ar fi hex, denumită, rgba sau hsla. Dacă valoarea culorii este omisă, umbrele de casetă sunt desenate în culoarea din prim-plan (text
color). Rețineți însă că browserele WebKit mai vechi (pre Chrome 20 și Safari 6) ignoră regula atunci când culoarea este omisă.
Folosirea unei culori semitransparente ca rgba(0, 0, 0, 0.4)este cea mai frecventă și un efect frumos, deoarece nu acoperă complet / opac ceea ce s-a terminat, ci permite ca ceea ce este sub să se arate puțin, ca o umbră reală.
Exemplu
Umbra interioara
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Exemplu
Internet Explorer (8 și mai jos) Box Shadow
Aveți nevoie de un element suplimentar, dar este posibil 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; )Numai pe o parte
Folosind o rază de răspândire negativă, puteți obține stoarce într-o umbră de cutie și împingeți-o doar de pe o margine a unei cutii.
.one-edge-shadow ( box-shadow: 0 8px 6px -6px black; )Borduri multiple și multe altele
Puteți face virgulă separată cu virgulă de câte ori doriți. De exemplu, aceasta arată două umbre cu poziții diferite și culori diferite pe același element:
box-shadow: inset 5px 5px 10px #000000, inset -5px -5px 10px blue;Exemplul arată cum puteți utiliza acest lucru pentru a crea mai multe margini:
Vedeți răceala stiloului Multiple Box-Shadow! de Chris Coyier (@chriscoyier) pe CodePen.
Prin aplicarea umbrelor pe pseudoelemente pe care le manipulați apoi, puteți obține niște umbre de cutie cu aspect 3D destul de fanteziste:
Vedeți Pen CSS3 Box Shadows Effects de Halil İbrahim Nuroğlu (@haibnu) pe CodePen.
Umbre super netede prin mai multe valori separate prin virgulă:
Vedeți
umbra de box Pen smooth de Chris Coyier (@chriscoyier)
pe CodePen.
Suport pentru browser
Consultați fragmentul din partea de sus a paginii pentru detalii despre acoperirea prefixului furnizorului. Aceasta este una dintre acele proprietăți în care renunțarea la prefixe este destul de rezonabilă în acest moment.