Az árnyékok (amelyeket gyakran „Drop Shadows” -nak neveznek, például a Photoshop-ban) elemektől való dobása. Íme egy példa a lehető legmélyebb böngészőtámogatással:
.shadow ( -webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */ box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ )Ez:
box-shadow: (horizontal offset) (vertical offset) (blur radius) (optional spread radius) (color);- Az árnyék vízszintes eltolása (szükséges), 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 fogja elhelyezni.
- Az árnyék függőleges eltolása (kötelező), a 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 (kötelező), ha 0-ra van állítva, az árnyék éles lesz, minél nagyobb a szám, annál elmosódottabb lesz, és minél előrébb terül el az árnyék. Például egy 5 képpontos vízszintes eltolással rendelkező árnyék, amelynek elmosódási sugara szintén 5 képpontos, a teljes árnyék 10 képpontja 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 (kötelező) - tetszőleges színértéket vesz fel, mint a hex, a megnevezett, az rgba vagy a hsla. Ha a színérték elmarad, a mező árnyékai rajzolódnak az előtér színébe (szöveg
color). De ne feledje, hogy a régebbi WebKit böngészők (a Chrome 20 előtti és a Safari 6 előtti verzió) figyelmen kívül hagyják a szabályt, ha a szín elmarad.
A félig átlátszó szín használata, mint például rgba(0, 0, 0, 0.4), a leggyakoribb, és kellemes hatású, mivel nem fedi le teljesen / átlátszatlanul azt, aminek vége, de lehetővé teszi, hogy az alatta lévő egy kicsit megmutassa, mint egy igazi árnyék.
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 (8-as és régebbi) Box Shadow
Szüksége van egy extra elemre, de ez képes rá filter.
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 ( box-shadow: 0 8px 6px -6px black; )Több határ és még sok más
Vesszővel elválaszthatja a box-shadow-ot tetszés szerint. Például két árnyék jelenik meg ugyanazon az elemen, különböző pozíciókkal és színnel:
box-shadow: inset 5px 5px 10px #000000, inset -5px -5px 10px blue;A példa bemutatja, hogyan használhatja ezt több határ létrehozására:
Lásd a Pen Multiple box-shadow hűvösséget! Chris Coyier (@chriscoyier) a CodePen-en.
Ha az árnyékokat olyan álelemekre alkalmazza, amelyeket aztán manipulál, akkor nagyon divatos, 3D megjelenésű doboz árnyékokat kaphat:
Lásd Halil İbrahim Nuroğlu (@haibnu) Pen CSS3 Box árnyékhatásai a CodePen-en.
Szuper sima árnyékok több vesszővel elválasztott értéken keresztül:
Lásd
Chris Coyier (@chriscoyier) Pen sima doboz-árnyékát a CodePen
-en.
Böngésző támogatás
A szállító előtag lefedettségével kapcsolatos részleteket lásd az oldal tetején található részletben. Ez egyike azoknak a tulajdonságoknak, ahol az előtagok eldobása ezen a ponton meglehetősen ésszerű.