Naudojamas metant šešėlius nuo bloko lygio elementų (pvz., 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; )- Horizontalus šešėlio poslinkis , teigiamas reiškia, kad šešėlis bus langelio dešinėje, neigiamas - šešėlį kairėje langelio pusėje.
- Vertikalus šešėlio poslinkis , neigiamas, reiškia, kad langelio šešėlis bus virš langelio, teigiamas - šešėlis bus žemiau langelio.
- Neryškus spindulys (pasirinktinai), jei nustatyta į 0, šešėlis bus aštrus, kuo didesnis skaičius, tuo jis bus neryškesnis.
- Sklaidos spindulys (pasirinktinai), teigiamos vertės padidina šešėlio dydį, neigiamos vertės sumažina. Numatytasis yra 0 (šešėlis yra tokio pat dydžio kaip neryškus).
- Spalva
Pavyzdys
Vidinis šešėlis
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Pavyzdys
„Internet Explorer“ dėžutės šešėlis
Jums reikia papildomų elementų ...
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; )Tik iš vienos pusės
Naudodami neigiamą plitimo spindulį, galite išspausti dėžutės šešėlį ir nustumti jį tik nuo vieno langelio krašto.
.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; )Susijęs
- CSS3: vertės skirtumas ir langelio šešėlis tik vienoje pusėje
- „Mozilla Docs“
- Kelios sienos su
box-shadow.