Kasutatakse elementide varju (sageli nimetatakse “Drop Shadows”, nagu Photoshopis) valamiseks. Siin on näide, millel on võimalikult sügav brauseritugi:
.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 */ )See on:
box-shadow: (horizontal offset) (vertical offset) (blur radius) (optional spread radius) (color);- Varju horisontaalne nihe (nõutav), positiivne tähendab, et vari jääb kasti paremale, negatiivne nihe paneb varje kasti vasakule.
- Varju vertikaalne nihe (nõutav), negatiivne tähendab, et kastivari asub kasti kohal, positiivne tähendab, et vari jääb kasti alla.
- Hägususraadius (vajalik), kui see on seatud väärtusele 0, on vari terav, seda suurem on see number, seda hägusam on see ja seda kaugemale vari ulatub. Näiteks 5px horisontaalse nihkega vari, millel on ka 5px hägususraadius, on 10px kogu varjust.
- Levimisraadius (valikuline), positiivsed väärtused suurendavad varju suurust, negatiivsed vähendavad suurust. Vaikimisi on 0 (vari on sama suur kui hägusus).
- Värv (kohustuslik) - võtab mis tahes värvi väärtuse, näiteks heksakujuline, nimega, rgba või hsla. Kui värviväärtus on välja jäetud, joonistatakse esiplaani värviga (tekst
color) kasti varjud . Kuid pidage meeles, et vanemad WebKiti brauserid (enne Chrome 20 ja Safari 6) ignoreerivad reeglit, kui värv on välja jäetud.
Sellise poolläbipaistva värvi kasutamine rgba(0, 0, 0, 0.4)on kõige tavalisem ja kena efekt, kuna see ei kata täielikult / läbipaistmatult seda, mis on lõppenud, kuid laseb allpool oleval natuke läbi näha, nagu tõeline vari.
Näide
Sisemine vari
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Näide
Internet Exploreri (8 ja vanem versioon) kastivari
Teil on vaja täiendavat elementi, kuid sellega saab hakkama 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; )Ainult ühepoolne
Negatiivse levimisraadiusega saate kasti varju pigistada ja lükata selle ainult kasti ühest servast.
.one-edge-shadow ( box-shadow: 0 8px 6px -6px black; )Mitu piiri ja palju muud
Võite koma eraldada kasti varju mitu korda, kui soovite. Näiteks näitab see sama elemendi kahte varju, millel on erinevad positsioonid ja erinevad värvid:
box-shadow: inset 5px 5px 10px #000000, inset -5px -5px 10px blue;Näide näitab, kuidas saate seda kasutada mitme piiri loomiseks:
Vaadake Pen Multiple box-shadow jahedust! autor Chris Coyier (@chriscoyier) CodePenis.
Rakendades varjud pseudoelementidele, mida seejärel manipuleerite, saate päris uhkeid 3D-välimusega kasti varje:
Vaadake CodePenilt Halil İbrahim Nuroğlu (@haibnu) Pen CSS3 Box Shadows Effects'i.
Üli siledad varjud mitme komaga eraldatud väärtuse kaudu:
Vaadake
CodePenil Chris Coyieri (@chriscoyier) pliiatsi sileda kasti varju
.
Brauseri tugi
Täpsemat teavet hankija eesliite katvuse kohta leiate lehe ülaosast. See on üks neist omadustest, kus eesliidete kukutamine on praegusel hetkel üsna mõistlik.