Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: box-shadow, Kategorien: Bildschirm­darstellung (allgemein), Backgrounds and Borders (CSS 3)

Box Schatten

Definiert den Schatten eines HTML-Elements.

CSS-Eigenschaft: box-shadow
KurzbeschreibungWerteStandardwertKategorieHinweis
Box Schatten
  • <length>
  • <color>
  • none
  • inset
none
Allgemein:
Bildschirm­darstellung
CSS 3:
Backgrounds and Borders
Neu in CSS 3
 

Folgendes ist beim Einsatz von box-shadow zu beachten:

  • box-shadow erzeugt einen Schlagschatten. Kann auf alle Elemente, also Inline und Block-Elemente angewendet werden.
  • Erwartet optional das Schlüsselwort inset, 2 bis 4 Werte in absoluter oder relativer Angabe von PX, EM usw. (%-Angaben werden nicht unterstützt) sowie eine Farbangabe. Die einzelnen Parameter haben folgende Auswirkung:
    • inset steuert einen Schlagschatten nach innen, ohne diese Angabe wird der Schatten außerhalb der Box dargestellt.
    • Die erste Längenangabe steuert die horizontale Schattenrichtung. Positive Werte erzeugen einen Schatten nach rechts, negative Werte nach links. Ohne einen zweiten Wert für die vertikale Richtung ist eine einzelne Längenangabe wirkungslos.
    • Die zweite Längenangabe steuert die vertikale Schattenrichtung. Positive Werte erzeugen einen Schatten nach unten, negative nach oben.
    • Die dritte Längenangabe bestimmt den Radius der Unschärfe und führt zu einem Schatten ohne scharfe Kanten.
    • Die vierte Längenangabe steuert die Vergrößerung des Schattens. Positive Werte vergrößern, bei negativen kommt es zu einer Verkleinerung des Schattens.
    • Der Farbwert steuert die Farbe des Schattens.
  • Ist eine Box mit abgerundeten Ecken dargestellt, nimmt auch der Schatten diese Rundungen an.
  • Der Internet Explorer unterstützt box-shadow ab der Version 9, Opera ab der Version 10.5, Firefox, Safari und Google Chrome benötigen je nach Version das Vendor-Präfix:
    • -moz-box-shadow: Firefox ab Version 3.5, ab Version 4.0 Unterstützung der Standardschreiweise box-shadow.
    • -webkit-box-shadow: Safari und Chrome ab Safari 3.0/Chrome 1.0, ab Safari 5.0/Chrome 4.0 vollständige Unterstützung der Standardschreiweise box-shadow.
  • Die Reihenfolge der Parameter sollte eingehalten werden. Die Angabe greift zwar auch, wenn die Farbangabe vorne steht, steht inset allerdings direkt vor der Farbangabe, wird die Regel ungültig. Ebenfalls kommt es zu keiner Darstellung, wenn inset oder der Farbwert zwischen den Längenangaben steht.
  • Es können mehrere Schatten in einer Regel definiert werden, die einzelnen Blöcke der Schattenangaben werden durch Kommas voneinander getrennt (Siehe Beispiel Nr. 11). Die Schattendarstellung findet von vorne nach hinten statt. Generell liegt der Schatten hinter dem HTML-Element, ein zweiter Schatten liegt hinter dem ersten, usw.
Browserunterstützung von box-shadow
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS3
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
nj
Version: 4Version: 5Version: 6Version: 7
tj
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu box-shadow:



Beispiele

HTML:

<div id="example-1">box-shadow</div>

CSS:

#example-1 {
   border: 1px solid #000;
   background-color:#FFFFA8;
   width: 100px;
   height: 100px;
   padding: 20px;
 
   box-shadow: #999 10px 10px;
}
/* Es sind immer mindestens zwei Längenangaben notwendig. */

Beispiel Nr. 1 So sieht's aus:

box-shadow
 

HTML:

<div id="example-2">box-shadow</div>

CSS:

#example-2 {
   border: 1px solid #000;
   background-color:#FFFFA8;
   width: 100px;
   height: 100px;
   padding: 20px;
 
   box-shadow: #999 10px 10px inset;
}
/* Der Wert inset steuert einen Schatten nach innen. */

Beispiel Nr. 2 So sieht's aus:

box-shadow
 

HTML:

<div id="example-3">box-shadow</div>

CSS:

#example-3 {
   border: 1px solid #000;
   background-color:#FFFFA8;
   width: 100px;
   height: 100px;
   padding: 20px;
 
   box-shadow: 20px 20px 10px #900 inset;
}
/* Die dritte Längenangabe steuert die Unschärfe des Schattens. */

Beispiel Nr. 3 So sieht's aus:

box-shadow
 

HTML:

<div id="example-4">box-shadow</div>

CSS:

#example-4 {
   border: 1px solid #000;
   background-color:#FFFFA8;
   width: 100px;
   height: 100px;
   padding: 20px;
 
   box-shadow: #009 20px 20px 0px 10px;
}
/* Die vierte Längenangabe steuert die Vergrößerung es Schattens. */

Beispiel Nr. 4 So sieht's aus:

box-shadow
 

HTML:

<div id="example-5">box-shadow</div>

CSS:

#example-5 {
   border: 1px solid #000;
   background-color:#FFFFA8;
   width: 100px;
   height: 100px;
   padding: 20px;
 
   box-shadow: #c00 100px 20px 20px 30px;
}
/* Beipsielvariante. */

Beispiel Nr. 5 So sieht's aus:

box-shadow
 

HTML:

<div id="example-6">box-shadow</div>

CSS:

#example-6 {
   border: 1px solid #000;
   background-color:#FFFFA8;
   width: 100px;
   height: 100px;
   padding: 20px;
 
   box-shadow: green 20px 20px 20px inset;
}
/* Ein weiteres Beispiel. */

Beispiel Nr. 6 So sieht's aus:

box-shadow
 

HTML:

<div id="example-7"><strong>box-shadow</strong></div>

CSS:

#example-7 strong {
   box-shadow: #009 5px 5px 5px;
}
/* Schatten können auch auf Inline-Elemente angewendet werden. */

Beispiel Nr. 7 So sieht's aus:

box-shadow
 

HTML:

<div id="example-8">box-shadow</div>

CSS:

#example-8 {
   border: 1px solid #000;
   background-color:#FFFFA8;
   width: 100px;
   height: 100px;
   padding: 20px;
 
   box-shadow: -15px -15px #900;
}
/* Negative Werten werfen den Schatten nach links bzw. oben. */

Beispiel Nr. 8 So sieht's aus:

box-shadow
 

HTML:

<div id="example-9">box-shadow</div>

CSS:

#example-9 {
   border: 1px solid #000;
   background-color:#FFFFA8;
   width: 100px;
   height: 100px;
   padding: 20px;
 
   box-shadow: 60px 40px 10px -20px #900;
}
/* Ein negativer vierter Wert führt zu einer Verkleinerung des Schattens. */

Beispiel Nr. 9 So sieht's aus:

box-shadow
 

HTML:

<div id="example-10">box-shadow</div>

CSS:

#example-10 {
   border: 5px solid #000;
   background-color:#FFFFA8;
   width: 100px;
   height: 100px;
   padding: 20px;
 
   border-radius: 15px;
 
   box-shadow: green 20px 20px ;
}
/* Eigenschaften des HTML-Elements - wie hier die runden Ecken - werden vom Schatten übernommen. */

Beispiel Nr. 10 So sieht's aus:

box-shadow
 

HTML:

<div id="example-11">box-shadow</div>

CSS:

#example-11 {
   border: 5px solid #000;
   background-color:#FFFFA8;
   width: 100px;
   height: 100px;
   padding: 20px;
 
   box-shadow: green 20px 20px 10px, red -10px 30px 10px, blue 50px -20px 10px;
}
/* Es können mehrere Schatten angegeben werden. Diese werden von vorne nach hinten dargestellt. */

Beispiel Nr. 11 So sieht's aus:

box-shadow
 

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 16. 10. 2017
Render Time: 0.169 sec.

Browser-Marktanteile