mozilla

Version 499035 von box-shadow

  • Adressname der Version: Web/CSS/box-shadow
  • Titel der Version: box-shadow
  • ID der Version: 499035
  • Erstellt:
  • Autor: fscholz
  • Aktuelle Version? Nein
  • Kommentar CSS/box-shadow Web/CSS/box-shadow

Inhalt der Version

{{ CSSRef() }} {{ gecko_minversion_header("1.9.1") }}

Übersicht:

Mit der (-moz-)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.

{{ gecko_callout_heading("2.0") }}

Vor Gecko 2.0 war diese Eigenschaft als -moz-box-shadow bekannt.

  • Standardwert: none
  • Anwendbar auf: alle Elemente
  • Vererbbar: Nein
  • Prozentwerte: Nein
  • Medium: visuell
  • berechneter Wert: wie festgelegt

Syntax

-moz-box-shadow:  none | inherit | <Schatten> [,<Schatten>]*

<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;

 

Browser Kompatibilität

Browser ab Version mehrere Schatten inset Schlüsselwort Ausbreitungsradius
Internet Explorer ---
5.5 unterstützt Microsofts DropShadow und Shadow Filter
--- --- ---
Firefox (Gecko) 4.0 (2.0) box-shadow 4.0 (2.0) 4.0 (2.0) 4.0 (2.0)
3.5 (1.9.1) -moz-box-shadow 3.5 (1.9.1) 3.5 (1.9.1) 3.5 (1.9.1)
Opera 10.5 box-shadow 10.5 10.5 10.5
Safari | Chrome | WebKit 3.0 | 1.0 | 522 -webkit-box-shadow 4.0 | 1.0 | 528 5.0 | 4.0 | 533 5.0 | 4.0 | 533

Spezifikation

Siehe auch

{{ HTML5ArticleTOC() }}

{{ languages( { "en": "en/CSS/box-shadow", "fr": "fr/CSS/-moz-box-shadow" } ) }}

Quelltext der Version

<p>{{ CSSRef() }} {{ gecko_minversion_header("1.9.1") }}</p>
<h2 id=".C3.9Cbersicht.3A">Übersicht:</h2>
<p>Mit der <code>(-moz-)box-shadow</code> Eigenschaft können Schatteneffekte für jeden willkürlichen Container festgelegt werden. Genau wie bei der <a href="/de/CSS/text-shadow" title="de/CSS/text-shadow"><code>text-shadow</code></a> Eigenschaft können mehrere Schatteneffekte, durch Kommata getrennt, von oben nach unten festgelegt werden. Der erste Schatten liegt oben. Wenn gleichzeitig eine <a href="/de/CSS/border-radius" title="de/CSS/-moz-border-radius">Abrundung der Ecken</a> festgelegt wurde, wird diese Abrundung bei den Schatteneffekten beachtet.</p>
<div class="geckoVersionNote">
 <p>{{ gecko_callout_heading("2.0") }}</p>
 <p>Vor Gecko 2.0 war diese Eigenschaft als <code>-moz-box-shadow</code> bekannt.</p>
</div>
<ul>
 <li>Standardwert: <code>none</code></li>
 <li>Anwendbar auf: alle Elemente</li>
 <li>Vererbbar: Nein</li>
 <li>Prozentwerte: Nein</li>
 <li>Medium: visuell</li>
 <li>berechneter Wert: wie festgelegt</li>
</ul>
<h2>Syntax</h2>
<pre class="eval">
-moz-box-shadow:  none | inherit | &lt;Schatten&gt; [,&lt;Schatten&gt;]*

<strong>&lt;Schatten&gt;</strong>:
inset? &amp;&amp; [ &lt;X-Verschiebung&gt; &lt;Y-Verschiebung&gt; &lt;Unschärfe-Radius&gt;? &lt;Ausbreitungsradius&gt;? &lt;Farbe&gt;? ]
</pre>
<h2>Werte</h2>
<dl>
 <dt>
  none</dt>
 <dd>
  Standardwert. Es wird kein Schatteneffekt erzeugt.</dd>
 <dt>
  inherit</dt>
 <dd>
  Der Wert des Elternelements wird geerbt.</dd>
 <dt>
  &lt;Schatten&gt;</dt>
 <dd>
  inset<br />
  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 <code>inset</code> 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 <code>inset</code> werden über dem <a href="/de/CSS/background" title="de/CSS/background">Hintergrund</a>, aber unter dem <a href="/de/CSS/border" title="de/CSS/border">Rahmen</a> und dem Inhalt gezeichnet.<br />
  <br />
  &lt;X-Verschiebung&gt; &lt;Y-Verschiebung&gt;:<br />
  Eine Angabe ist erforderlich. Es gibt zwei <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Längenwerte</a>, die die Verschiebung des Schattens angeben. Die &lt;X-Verschiebung&gt; verschiebt den Schatten auf horizontaler und die &lt;Y-Verschiebung&gt; 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 &lt;Unschärfe-Radius&gt; oder eines &lt;Ausbreitungsradius&gt; sichtbar werden.<br />
  <br />
  &lt;Unschärfe-Radius&gt;:<br />
  Die Angabe ist optional und Null, wenn kein &lt;Unschärfe-Radius&gt; 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: <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Längen</a><br />
  <br />
  &lt;Ausbreitungsradius&gt;:<br />
  Eine weitere Längenangabe, deren Angabe optional ist. Wenn nicht festgelegt ist der Ausbreitungsradius <code>0</code> und der Schatten hat die gleiche Größe wie das Element. Positive Werte erweitern den Schatten, negative Werte verkleinern ihn.<br />
  <br />
  <a href="/de/CSS/Farben" title="de/CSS/Farben">&lt;Farbe&gt;</a>:<br />
  Die Angabe ist optional. Wenn nicht festgelegt, hängt die Farbe vom Browser ab. In Gecko (Firefox) wird der Wert der <a href="/de/CSS/color" title="de/CSS/color"><code>color</code></a> Eigenschaft verwendet. Der Schatten in Safari ist transparent und daher ist eine Angabe erforderlich, um überhaupt einen Schatten zu sehen.</dd>
</dl>
<h2>Beispiele</h2>
<ul>
 <li><a class="external" href="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html" title="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html"><code>box-shadow</code> Test</a></li>
 <li><a class="external" href="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/" title="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/"><code>box-shadow</code> Tutorial und Beispiele</a></li>
</ul>
<pre style="-moz-box-shadow: teal 60px -16px; -webkit-box-shadow: teal 60px -16px; box-shadow: teal 60px -16px; float:left; margin:1em">
   -moz-box-shadow: 60px -16px teal;
-webkit-box-shadow: 60px -16px teal;
        box-shadow: 60px -16px teal;
</pre>
<pre style="-moz-box-shadow: black 10px 5px 5px; -webkit-box-shadow: black 10px 5px 5px; box-shadow: black 10px 5px 5px; float:left; margin:1em">
   -moz-box-shadow: 10px 5px 5px black;
-webkit-box-shadow: 10px 5px 5px black;
        box-shadow: 10px 5px 5px black;
</pre>
<pre style="-moz-box-shadow: red 3px 3px, olive -1em 0 0.4em; -webkit-box-shadow: red 3px 3px, olive -1em 0 0.4em; box-shadow: red 3px 3px, olive -1em 0 0.4em; float:left; margin:1em">
   -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;
</pre>
<pre style="-moz-box-shadow: inset 5em 1em gold; -webkit-box-shadow: inset 5em 1em gold; box-shadow: inset 5em 1em gold; float:left; margin:1em">
   -moz-box-shadow: inset 5em 1em gold;
-webkit-box-shadow: inset 5em 1em gold;
        box-shadow: inset 5em 1em gold; 
</pre>
<pre style="-moz-box-shadow: 0 0 1em gold; -webkit-box-shadow: 0 0 1em gold; box-shadow: 0 0 1em gold; float:left; margin:1em">
   -moz-box-shadow: 0 0 1em gold;
-webkit-box-shadow: 0 0 1em gold;
        box-shadow: 0 0 1em gold; 
</pre>
<pre style="-moz-box-shadow: inset 0 0 1em gold; -webkit-box-shadow: inset 0 0 1em gold; box-shadow: inset 0 0 1em gold; float:left; margin:1em">
   -moz-box-shadow: inset 0 0 1em gold;
-webkit-box-shadow: inset 0 0 1em gold;
        box-shadow: inset 0 0 1em gold;
</pre>
<p style="clear:both">&nbsp;</p>
<h2>Browser Kompatibilität</h2>
<table class="standard-table">
 <tbody>
  <tr>
   <th>Browser</th>
   <th colspan="2">ab Version</th>
   <th>mehrere Schatten</th>
   <th><code>inset</code> Schlüsselwort</th>
   <th>Ausbreitungsradius</th>
  </tr>
  <tr>
   <td>Internet Explorer</td>
   <td colspan="2">---<br />
    5.5 unterstützt Microsofts <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532985%28VS.85,loband%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms532985(VS.85,loband).aspx">DropShadow</a> und <a class="external" href="http://msdn.microsoft.com/en-us/library/ms533086%28VS.85,loband%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533086(VS.85,loband).aspx">Shadow</a> Filter</td>
   <td>---</td>
   <td>---</td>
   <td>---</td>
  </tr>
  <tr>
   <td rowspan="2">Firefox (Gecko)</td>
   <td><strong>4.0</strong> (2.0)</td>
   <td><code>box-shadow</code></td>
   <td>4.0 (2.0)</td>
   <td>4.0 (2.0)</td>
   <td>4.0 (2.0)</td>
  </tr>
  <tr>
   <td><strong>3.5</strong> (1.9.1)</td>
   <td><code>-moz-box-shadow</code></td>
   <td>3.5 (1.9.1)</td>
   <td>3.5 (1.9.1)</td>
   <td>3.5 (1.9.1)</td>
  </tr>
  <tr>
   <td>Opera</td>
   <td><strong>10.5</strong></td>
   <td><code>box-shadow</code></td>
   <td>10.5</td>
   <td>10.5</td>
   <td>10.5</td>
  </tr>
  <tr>
   <td>Safari | Chrome | WebKit</td>
   <td>3.0 | 1.0 | 522</td>
   <td><code>-webkit-box-shadow</code></td>
   <td>4.0 | 1.0 | 528</td>
   <td>5.0 | 4.0 | 533</td>
   <td>5.0 | 4.0 | 533</td>
  </tr>
 </tbody>
</table>
<h2>Spezifikation</h2>
<ul>
 <li><a class="external" href="http://dev.w3.org/csswg/css3-background/#the-box-shadow">CSS 3 Backgrounds and Borders</a> Last Call</li>
</ul>
<h2>Siehe auch</h2>
<ul>
 <li><a href="/de/CSS/text-shadow" title="de/CSS/text-shadow"><code>text-shadow</code></a></li>
</ul>
<p>{{ HTML5ArticleTOC() }}</p>
<p>{{ languages( { "en": "en/CSS/box-shadow", "fr": "fr/CSS/-moz-box-shadow" } ) }}</p>
Zu dieser Version zurücksetzen