-moz-box-shadow

von 1 Mitwirkenden:

Übersicht:

Mit der box-shadow Eigenschaft können Schatteneffekte für jeden willkürlichen Container festgelegt werden. Genau wie bei der text-shadow Eigenschaft können mehrere Schatteneffekte, durch Kommata getrennt, von oben nach unten festgelegt werden. Der erste Schatten liegt oben. Wenn gleichzeitig eine Abrundung der Ecken festgelegt wurde, wird diese Abrundung bei den Schatteneffekten beachtet.

  • Standardwert none
  • Anwendbar auf Alle Elemente
  • Vererbt Nein
  • Prozentwerte
  • Medium visuell
  • Berechneter Wert any length made absolute; any specified color computed; otherwise as specified
  • Animierbar Ja, als Schatten
  • Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

box-shadow:  none | <shadow>#

<Schatten>:
inset? && [ <X-Verschiebung> <Y-Verschiebung> <Unschärfe-Radius>? <Ausbreitungsradius>? <Farbe>? ]

Werte

none
Standardwert. Es wird kein Schatteneffekt erzeugt.
inherit
Der Wert des Elternelements wird geerbt.
<Schatten>
inset
Die Angabe ist optional. Wenn nicht festgelegt, wird angenommen, dass es sich um einen Schlagschatten handelt (sodass es so aussieht als wenn sich die Box über dem Inhalt befindet). Wird das inset Schlüsselwort gesetzt, befindet sich der Schatten innerhalb des Rahmens der Box (sodass es so aussieht als wenn der Inhalt in die Box hinein gedrückt wird). Schatten mit inset werden über dem Hintergrund, aber unter dem Rahmen und dem Inhalt gezeichnet.

<X-Verschiebung> <Y-Verschiebung>:
Eine Angabe ist erforderlich. Es gibt zwei Längenwerte, die die Verschiebung des Schattens angeben. Die <X-Verschiebung> verschiebt den Schatten auf horizontaler und die <Y-Verschiebung> auf vertikaler Ebene. Negative Werte sind auch möglich. Wenn beide Werte auf Null gesetzt sind, liegt der Schatten unter dem Text und kann nur beim Festlegen eines <Unschärfe-Radius> oder eines <Ausbreitungsradius> sichtbar werden.

<Unschärfe-Radius>:
Die Angabe ist optional und Null, wenn kein <Unschärfe-Radius> gesetzt wurde. Je großer der Wert, desto größer die Unschärfe. Der Schatten wird dadurch umso mehr ausgedehnt und schwacher. Mögliche Einheiten: Längen

<Ausbreitungsradius>:
Eine weitere Längenangabe, deren Angabe optional ist. Wenn nicht festgelegt ist der Ausbreitungsradius 0 und der Schatten hat die gleiche Größe wie das Element. Positive Werte erweitern den Schatten, negative Werte verkleinern ihn.

<Farbe>:
Die Angabe ist optional. Wenn nicht festgelegt, hängt die Farbe vom Browser ab. In Gecko (Firefox) wird der Wert der color Eigenschaft verwendet. Der Schatten in Safari ist transparent und daher ist eine Angabe erforderlich, um überhaupt einen Schatten zu sehen.

Beispiele

   -moz-box-shadow: 60px -16px teal;
-webkit-box-shadow: 60px -16px teal;
        box-shadow: 60px -16px teal;
   -moz-box-shadow: 10px 5px 5px black;
-webkit-box-shadow: 10px 5px 5px black;
        box-shadow: 10px 5px 5px black;
   -moz-box-shadow: 3px 3px red, -1em 0 0.4em olive;
-webkit-box-shadow: 3px 3px red, -1em 0 0.4em olive;
        box-shadow: 3px 3px red, -1em 0 0.4em olive;
   -moz-box-shadow: inset 5em 1em gold;
-webkit-box-shadow: inset 5em 1em gold;
        box-shadow: inset 5em 1em gold; 
   -moz-box-shadow: 0 0 1em gold;
-webkit-box-shadow: 0 0 1em gold;
        box-shadow: 0 0 1em gold; 
   -moz-box-shadow: inset 0 0 1em gold;
-webkit-box-shadow: inset 0 0 1em gold;
        box-shadow: inset 0 0 1em gold;

 

Spezifikation

Spezifikation Status Anmerkung
CSS Backgrounds and Borders Module Level 3 Candidate Recommendation  

Browser Kompatibilität

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 10.0
1.0-webkit
4.0 (2.0)
3.5 (1.9.1)-moz
9.0 (See note) 10.5 5.1 (WebKit 534)
3.0 (WebKit 522)-webkit
Multiple shadows 10.0
1.0-webkit
4.0 (2.0)
3.5 (1.9.1)-moz
9.0 10.5 5.1 (WebKit 534)
3.0 (WebKit 522)-webkit
inset keyword 10.0
4.0-webkit
4.0 (2.0)
3.5 (1.9.1)-moz
9.0 10.5 5.1 (WebKit 534)
5.0 (WebKit 533)-webkit
Spread radius 10.0
4.0-webkit
4.0 (2.0)
3.5 (1.9.1)-moz
9.0 10.5 5.1 (WebKit 534)
5.0 (WebKit 533)-webkit
Feature iOS Safari Opera Mini Opera Mobile Android Browser
Basic support

5.0
(Yes)-webkit

? ? ?
Multiple shadows 5.0
(Yes)-webkit
? ? ?
inset keyword 5.0
(Yes)-webkit
? ? ?
Spread radius 5.0
(Yes)-webkit
? ? ?

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: fscholz
Zuletzt aktualisiert von: fscholz,
Seitenleiste ausblenden