Kasutatakse varju heitmiseks plokitaseme elementidelt (nagu div).
.shadow ( -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; )- Varju horisontaalne nihe , positiivne tähendab, et vari jääb kasti paremale, negatiivne nihe paneb varje kasti vasakule.
- Varju vertikaalne nihe , negatiivne, tähendab, et kastivari asub kasti kohal, positiivne tähendab, et vari jääb kasti alla.
- Hägususraadius (valikuline), kui see on seatud väärtusele 0, on vari terav, seda suurem on number, seda hägusam on see.
- Levimisraadius (valikuline), positiivsed väärtused suurendavad varju suurust, negatiivsed vähendavad suurust. Vaikimisi on 0 (vari on sama suur kui hägusus).
- Värv
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 kastivari
Te vajate täiendavaid elemente ...
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 ( -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; )Seotud
- CSS3: hajuväärtus ja kasti vari ainult ühel küljel
- Mozilla dokumendid
- Mitu piiri koos
box-shadow.