Használható árnyékok vetítéséhez blokkszintű elemekről (például div-ekről).
.shadow ( -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; )- Az árnyék vízszintes eltolása , pozitív azt jelenti, hogy az árnyék a doboz jobb oldalán lesz, egy negatív eltolás az árnyékot a doboz bal oldalán helyezi el.
- Az árnyék függőleges eltolása , egy negatív azt jelenti, hogy a doboz-árnyék a doboz felett lesz, a pozitív azt jelenti, hogy az árnyék a doboz alatt lesz.
- Az elmosódási sugár (opcionális), ha 0-ra van állítva, az árnyék éles lesz, minél nagyobb a szám, annál elmosódottabb lesz.
- A terjedési sugár (opcionális), a pozitív értékek növelik az árnyék méretét, a negatív értékek pedig csökkentik az méretet. Alapértelmezés szerint 0 (az árnyék ugyanolyan méretű, mint az elmosódás).
- Szín
Példa
Belső árnyék
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Példa
Internet Explorer Box árnyék
Szüksége van további elemekre ...
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; )Csak egyoldalas
Negatív terjedési sugár használatával összenyomódhat egy doboz árnyéka, és csak egy doboz széléről tolhatja le.
.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; )Összefüggő
- CSS3: az érték és a box-shadow csak az egyik oldalon terjed
- Mozilla Docs
- Több határ a
box-shadow.