CSS/Eigenschaften/äußere Gestaltung/box-shadow

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft box-shadow ermöglicht die Darstellung von Schattenverläufen für Boxen.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>box-shadow</title>
    <style>
      div {
        float: left;
        width: 150px;
        height: 150px;
        margin: 50px;
        padding: 25px;
        background-color: #eed;
      }
 
      #one   { box-shadow: 10px 10px 10px 20px #999; }
      #two   { box-shadow: 10px 0 10px #999 inset; }
      #three { box-shadow: -10px -10px 10px #ccc inset, 10px 10px #aaa; }
      #four  { box-shadow: 0 175px #eed inset, 0 0 0 5px red inset; }
      #five  { box-shadow: 2em 0 #eed inset, -2em 0 #eed inset, 0 -3px 0 0 red inset
    </style>
  </head>
  <body>
    <div id="one">Box mit Schlagschatten</div>
    <div id="two">Box mit innen liegendem Schatten</div>
    <div id="three">mehrere Schatten werden durch Kommata getrennt</div>
    <div id="four">„Abgeschnittene Rahmen“</div>
    <div id="five">verkürzte Unterstreichung</div>
  </body>
</html>

box-shadow benötigt folgende Angaben:

  • eine Längenangabe für die horizontale Verschiebung,
  • eine Längenangabe für die vertikale Verschiebung
  • eine Farbangabe

Für die Längenangaben sind sowohl negative als auch positive Werte erlaubt, jedoch keine Prozentangaben. Firefox, der Internet Explorer und Opera initialisieren eine fehlende Farbangabe mit der Schriftfarbe des Elementes, welches den Schatten erhalten soll.

Optional sind folgende Angaben:

  • eine dritte Längenangabe (blur): (Weichzeicheneffekt) Null entspricht einer scharfen Darstellung. Je größer der Wert, umso „verwaschener“ erscheint der Schatten.
  • eine vierte Längenangabe (spread): (Maß für eine zusätzliche Vergrößerung des Schattens). Null bedeutet hier, dass der Schatten die Abmessungen „seines“ Elementes hat. Für den Ausbreitungsradius sind auch negative Werte möglich. Prozentangaben sind nicht erlaubt.
  • das Schlüsselwort inset gibt an, dass der Schatten ins Innere der Box geworfen wird. Dies darf nur als erste oder letzte Angabe gesetzt werden.

Erlaubt ist zudem die Angabe none.

Mehrere Schatten werden durch Kommata getrennt, sie werden dabei in umgekehrter Reihenfolge übereinander gelegt, das heißt der zuerst genannte Schatten liegt ganz oben.

Hinweis zum Internet Explorer: Ein table Element mit border-collapse:collapse zeigt keinen box-shadow an.

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML