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

Syntax

box-shadow: offset-x | offset-y | [blur-radius] | [spread] |[color]

  • offset-x offset-y: horizontaler und vertikaler Versatz des Schattens,
    eine Längenangabe jedoch kein Prozentwert
  • blur-radius: (optionaler) Weichzeicheneffekt. Der Standardwert 0 entspricht einer scharfen Darstellung. Je größer der Wert, umso „verwaschener“ erscheint der Schatten.
  • spread: (optionales) Maß für eine zusätzliche Vergrößerung des Schattens. Der Standardwert 0 bedeutet hier, dass der Schatten die Abmessungen „seines“ Elementes hat. Für den Ausbreitungsradius sind auch negative Werte möglich. Prozentangaben sind nicht erlaubt.
  • color: (optionale) Farbangabe,
    Standardwert ist currentColor, die Schriftfarbe des Elementes
  • inset gibt an, dass der Schatten ins Innere der Box geworfen wird. Dies darf nur als erste oder letzte Angabe gesetzt werden.
  • none: kein Schatten (Standardwert)
Beispiel ansehen …
div {
	float: left;
	width: 8em;
	height: 8em;
	margin: 1em;
	padding: 0.5em;
	background-color: beige;
}

#one {
	box-shadow: 10px 10px 10px 15px grey;
}

#two {
	box-shadow: 10px 0 10px grey inset;
}

#three {
	box-shadow: -10px -10px 10px lightgrey inset, 10px 10px grey;
}

#three {
  border: 1px solid grey;
  border-radius: 5px;
  box-shadow: 10px 10px 10px white inset, 10px 10px 10px grey;
}

#four {
	border-radius: 1.5em;
	border: 10px solid red;
	box-shadow: 0 0 0 1em red inset;
	padding: 1em;
}

#five {
	box-shadow: 2em 0 khaki inset, -2em 0 khaki inset, 0 -5px 0 0 red inset
}
Das Beispiel enthält fünf div-Elemente, die unterschiedliche Schatten werfen.
  • Box 1 hat einen Versatz von je 10px, einen Blur von 10px und einen spread von 15px
  • Box 2 hat durch das Schlüsselwort inset einen inneliegenden Schatten nur nach rechts ohne einen Versatz auf der y-Achse
  • Box 3 hat einen weißen Innenschatten und, durch ein Komma getrennt, einen weiteren Außenschatten nach rechts unten
  • Box 4 hat einen abgeschnittenen Rahmen, was sich mit border nicht erreichen lässt. Der border-radius wirkt auf das div, dann wird ein roter Innenschatten von 1em drübergelegt.
  • Box 5 hat einen roten Innenschatten, der an beiden Seiten aber durch einen khaki-farbenen Innenschatten verdeckt wird, sodass es zu einer verkürzten Unterstreichung kommt.


Mehrere Schatten werden durch Kommata getrennt, sie werden dabei in umgekehrter Reihenfolge übereinander gelegt, dass 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.

Beachten Sie: box-shadow vergrößert das Element scheinbar. Wenn Sie Rahmen (wie Box 4 im Bsp.) mit box-shadow realisieren, ist dieser Außenbereich nicht anklick- und fokussierbar.

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]