Uporablja se pri metanju senc iz elementov na ravni bloka (na primer div-ji).
.shadow ( -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; )- Horizontalni odmik sence, pozitiven pomeni, da bo senca na desni strani polja, negativni odmik pa senco na levi strani polja.
- Navpični odmik sence, negativni pomeni, da bo senca polja nad poljem, pozitiven pomeni, da bo senca pod poljem.
- Polmer zameglitve (neobvezno), če je senca nastavljena na 0, bo senca ostra, večja kot je številka, bolj zamegljena bo.
- Polmer širjenja (neobvezno), pozitivne vrednosti povečajo velikost sence, negativne vrednosti zmanjšajo velikost. Privzeto je 0 (senca je enaka velikosti zameglitve).
- Barva
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 Box Shadow
Potrebujete dodatne 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; )Samo za eno stran
Z negativnim polmerom širjenja lahko senco škatle stisnete in jo potisnete samo z enega roba škatle.
.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; )Sorodno
- CSS3: razprši vrednost in senco polja samo na eno stran
- Mozilla Docs
- Več meja z
box-shadow.