mozilla

Version 499455 von box-shadow

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

Inhalt der Version

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

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

{{ gecko_callout_heading("2.0") }}

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

{{cssbox("box-shadow")}}

Syntax

box-shadow:  {{csssyntax("box-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
{{ SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow') }} {{ Spec2('CSS3 Backgrounds') }}  

Browser Kompatibilität

{{ CompatibilityTable }}

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

5.0
{{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}

{{ CompatUnknown }} {{ CompatUnknown }} {{ CompatUnknown }}
Multiple shadows 5.0
{{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}
{{ CompatUnknown }} {{ CompatUnknown }} {{ CompatUnknown }}
inset keyword 5.0
{{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}
{{ CompatUnknown }} {{ CompatUnknown }} {{ CompatUnknown }}
Spread radius 5.0
{{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}
{{ CompatUnknown }} {{ CompatUnknown }} {{ CompatUnknown }}

 

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>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>
<p>{{cssbox("box-shadow")}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="eval">
box-shadow:  {{csssyntax("box-shadow")}}

<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 id="Werte">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 id="Beispiele">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 id="Spezifikation" style="clear: both;">Spezifikation</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Anmerkung</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow') }}</td>
   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_Kompatibilit.C3.A4t">Browser Kompatibilität</h2>
<p>{{ CompatibilityTable }}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>10.0<br />
     1.0{{ property_prefix("-webkit") }}</td>
    <td>{{ CompatGeckoDesktop("2.0") }}<br />
     {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td>
    <td>9.0 (See note)</td>
    <td>10.5</td>
    <td>5.1 (WebKit 534)<br />
     3.0 (WebKit 522){{ property_prefix("-webkit") }}</td>
   </tr>
   <tr>
    <td>Multiple shadows</td>
    <td>10.0<br />
     1.0{{ property_prefix("-webkit") }}</td>
    <td>{{ CompatGeckoDesktop("2.0") }}<br />
     {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td>
    <td>9.0</td>
    <td>10.5</td>
    <td>5.1 (WebKit 534)<br />
     3.0 (WebKit 522){{ property_prefix("-webkit") }}</td>
   </tr>
   <tr>
    <td><code>inset</code> keyword</td>
    <td>10.0<br />
     4.0{{ property_prefix("-webkit") }}</td>
    <td>{{ CompatGeckoDesktop("2.0") }}<br />
     {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td>
    <td>9.0</td>
    <td>10.5</td>
    <td>5.1 (WebKit 534)<br />
     5.0 (WebKit 533){{ property_prefix("-webkit") }}</td>
   </tr>
   <tr>
    <td>Spread radius</td>
    <td>10.0<br />
     4.0{{ property_prefix("-webkit") }}</td>
    <td>{{ CompatGeckoDesktop("2.0") }}<br />
     {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td>
    <td>9.0</td>
    <td>10.5</td>
    <td>5.1 (WebKit 534)<br />
     5.0 (WebKit 533){{ property_prefix("-webkit") }}</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>iOS Safari</th>
    <th>Opera Mini</th>
    <th>Opera Mobile</th>
    <th>Android Browser</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>
     <p>5.0<br />
      {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}</p>
    </td>
    <td>{{ CompatUnknown }}</td>
    <td>{{ CompatUnknown }}</td>
    <td>{{ CompatUnknown }}</td>
   </tr>
   <tr>
    <td>Multiple shadows</td>
    <td>5.0<br />
     {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}</td>
    <td>{{ CompatUnknown }}</td>
    <td>{{ CompatUnknown }}</td>
    <td>{{ CompatUnknown }}</td>
   </tr>
   <tr>
    <td><code>inset</code> keyword</td>
    <td>5.0<br />
     {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}</td>
    <td>{{ CompatUnknown }}</td>
    <td>{{ CompatUnknown }}</td>
    <td>{{ CompatUnknown }}</td>
   </tr>
   <tr>
    <td>Spread radius</td>
    <td>5.0<br />
     {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}</td>
    <td>{{ CompatUnknown }}</td>
    <td>{{ CompatUnknown }}</td>
    <td>{{ CompatUnknown }}</td>
   </tr>
  </tbody>
 </table>
</div>
<p>&nbsp;</p>
<h2 id="Siehe_auch">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