mozilla
Ihre Suchergebnisse

    box-shadow

    Ü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.

    • Initialwert none
    • Anwendbar auf Alle Elemente. Auch anwendbar auf ::first-letter.
    • Vererbt Nein
    • Prozentwerte
    • Medium visuell
    • Berechneter Wert any length made absolute; any specified color computed; otherwise as specified
    • Animierbar Ja, als Schatten
    • Kanonische Reihenfolge die einzige nicht missverständliche Reihenfolge definiert durch die formale Grammatik

    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 der Box 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
    Die Definition von 'box-shadow' in dieser Spezifikation.
    Anwärter Empfehlung  

    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
    (Ja)-webkit

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

    Siehe auch

    Schlagwörter des Dokuments und Mitwirkende

    Mitwirkende an dieser Seite: supermueller, SJW, fscholz, Jürgen Jeka, The Witcher
    Zuletzt aktualisiert von: supermueller,