Wird verwendet, um Schatten (wie in Photoshop häufig als „Schlagschatten“ bezeichnet) aus Elementen zu werfen. Hier ist ein Beispiel mit möglichst umfassender Browserunterstützung:
.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 */ )Das ist:
box-shadow: (horizontal offset) (vertical offset) (blur radius) (optional spread radius) (color);- Der horizontale Versatz (erforderlich) des Schattens, positiv bedeutet, dass sich der Schatten rechts von der Box befindet. Ein negativer Versatz platziert den Schatten links von der Box.
- Der vertikale Versatz (erforderlich) des Schattens, ein negativer bedeutet, dass sich der Box-Schatten über dem Box befindet, ein positiver bedeutet, dass sich der Schatten unter dem Box befindet.
- Der Unschärferadius (erforderlich): Wenn der Schatten auf 0 gesetzt ist, ist er scharf. Je höher die Zahl, desto unschärfer wird er und desto weiter nach außen erstreckt sich der Schatten. Ein Schatten mit einem horizontalen Versatz von 5 Pixel und einem Unschärferadius von 5 Pixel entspricht beispielsweise 10 Pixel des gesamten Schattens.
- Der Ausbreitungsradius (optional), positive Werte erhöhen die Größe des Schattens, negative Werte verringern die Größe. Die Standardeinstellung ist 0 (der Schatten hat die gleiche Größe wie Unschärfe).
- Farbe (erforderlich) - Nimmt einen beliebigen Farbwert an, z. B. hex, named, rgba oder hsla. Wenn der Farbwert weggelassen wird, werden Feldschatten in der Vordergrundfarbe (Text
color) gezeichnet . Beachten Sie jedoch, dass ältere WebKit-Browser (vor Chrome 20 und Safari 6) die Regel ignorieren, wenn die Farbe weggelassen wird.
Die Verwendung einer halbtransparenten Farbe wie rgba(0, 0, 0, 0.4)ist am gebräuchlichsten und ein schöner Effekt, da sie nicht vollständig / undurchsichtig abdeckt, was darüber ist, sondern zulässt, dass das, was darunter liegt, wie ein echter Schatten ein wenig durchscheint.
Beispiel
Inneren Schatten
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Beispiel
Internet Explorer (8 und niedriger) Box Shadow
Sie benötigen ein zusätzliches Element, aber es ist machbar mit 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; )Nur einseitig
Wenn Sie einen negativen Ausbreitungsradius verwenden, können Sie einen Boxschatten zusammendrücken und ihn nur von einer Kante einer Box drücken.
.one-edge-shadow ( box-shadow: 0 8px 6px -6px black; )Mehrere Grenzen & mehr
Sie können einen separaten Kastenschatten beliebig oft als Komma verwenden. Dies zeigt beispielsweise zwei Schatten mit unterschiedlichen Positionen und unterschiedlichen Farben auf demselben Element:
box-shadow: inset 5px 5px 10px #000000, inset -5px -5px 10px blue;Das Beispiel zeigt, wie Sie damit mehrere Rahmen erstellen können:
Sehen Sie den Pen Multiple Box-Shadow Coolness! von Chris Coyier (@chriscoyier) auf CodePen.
Wenn Sie die Schatten auf Pseudoelemente anwenden, die Sie dann bearbeiten, erhalten Sie einige ziemlich ausgefallene 3D-Box-Schatten:
Sehen Sie sich die Pen CSS3 Box Shadows-Effekte von Halil İbrahim Nuroğlu (@haibnu) auf CodePen an.
Super glatte Schatten über mehrere durch Kommas getrennte Werte:
Sehen Sie den Pen
Smooth Box-Shadow von Chris Coyier (@chriscoyier)
auf CodePen.
Browser-Unterstützung
Weitere Informationen zur Abdeckung von Herstellerpräfixen finden Sie oben auf der Seite im Snippet. Dies ist eine dieser Eigenschaften, bei denen das Löschen der Präfixe an dieser Stelle ziemlich sinnvoll ist.