Käytetään varjojen heittämiseen lohkotason elementeistä (kuten 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; )- Varjon vaakasuora siirtymä , positiivinen tarkoittaa, että varjo on laatikon oikealla puolella, negatiivinen siirto asettaa varjon laatikon vasemmalle puolelle.
- Varjon pystysuora siirtymä , negatiivinen, tarkoittaa, että laatikko-varjo on laatikon yläpuolella, positiivinen tarkoittaa, että varjo on laatikon alapuolella.
- Hämärtösäde (valinnainen), jos asetettu arvoon 0, varjo on terävä, sitä suurempi luku, sitä epäselvempi se on.
- Hajotussäde (valinnainen), positiiviset arvot lisäävät varjon kokoa, negatiiviset arvot pienentävät kokoa. Oletus on 0 (varjo on samankokoinen kuin sumennus).
- Väri
Esimerkki
Sisäinen varjo
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Esimerkki
Internet Explorer -ruudun varjo
Tarvitset ylimääräisiä elementtejä ...
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; )Vain yksipuolinen
Negatiivisen leviämissäteen avulla voit puristaa laatikon varjoa ja työntää sen vain laatikon yhdeltä reunalta.
.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; )Liittyvät
- CSS3: hajautusarvo ja laatikko-varjo vain toisella puolella
- Mozilla Docs
- Useita reunoja
box-shadow.