Rahmen

Sie können nahezu für jedes Element in HTML einen Rahmen definieren. Einem Rahmen kann eine Linienart, eine Linienstärke und eine Linienfarbe zugewiesen werden. Zusätlich steht für jeden Rahmen die Eigenschaft Oben, Unten, Links und Rechts zur Verfügung.

Eigenschaft Bedeutung Wertzuweisung
border-style Rahmenart none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit
border-width Rahmenbreite thin, medium, thick, Längenangabe, initial, inherit
border-color Rahmenfarbe transparent, Farbname, Hexadezimal, RGB, RGBA, HSL, HSLA , initial, inherit
border Zusammenfassung border-color border-style border-width, initial, inherit
border-bottom-style Rahmenart unten wie border-style
border-bottom-width Rahmenbreite unten wie border-width
border-bottom-color Rahmenfarbe unten wie border-color
border-bottom Zusammenfassung Rahmen unten border-bottom-width border-bottom-style border-bottom-color
border-left-style Rahmenart links wie border-style
border-left-width Rahmenbreite links wie border-width
border-left-color Rahmenfarbe links wie border-color
border-left Zusammenfassung Rahmen links border-top-color border-top-style border-top-width, initial, inherit
border-right-style Rahmenart rechts wie border-style
border-right-width Rahmenbreite rechts wie border-width
border-right-color Rahmenfarbe rechts wie border-color
border-right Zusammenfassung Rahmen rechts border-right-width border-right-style border-right-color, initial, inherit
border-top-style Rahmenart oben wie border-style
border-top-width Rahmenbreite oben wie border-width
border-top-color Rahmenfarbe oben wie border-color
border-top Zusammenfassung Rahmen oben border-top-color border-top-style border-top-width, initial, inherit
border-top-right-radius Abrundung für oben rechts Längenangabe, Prozentwert, initial, inherit
border-bottom-right-radius Abrundung für unten rechts Längenangabe, Prozentwert, initial, inherit
border-bottom-left-radius Abrundung für unten links Längenangabe, Prozentwert, initial, inherit
border-top-left-radius Abrundung für oben links Längenangabe, Prozentwert, initial, inherit
border-radius Zusammenfassung border-top-right-radius border-bottom-right-radius border-bottom-left-radius border-top-left-radius, initial, inherit

border-style

Mit border-style wird die Rahmenart definiert, border-style ist nicht vererbbar.

div { border-style: solid; }

Mögliche Werte für border-style

  • none: kein Rahmen
  • hidden: kein Rahmen bzw. unsichtbarer Rahmen, für Tabellenzellen
  • dotted: gepunktet
  • dashed: gestrichelt
  • solid: durchgezogen
  • double: doppelt
  • groove: 3D-Effekt
  • ridge: 3D-Effekt
  • inset: 3D-Effekt
  • outset: 3D-Effekt

Die border-style Eigenschaft kann noch bis zu vier unterschiedliche Linienarten aufnehmen.

div { border-style: dotted solid double dashed; } 
  • top border ist dotted
  • right border ist solid
  • bottom border ist double
  • left border ist dashed
div { border-style: dotted solid double; } 
  • top border ist dotted
  • right und left borders sind solid
  • bottom border ist double
div { border-style: dotted solid; } 
  • top und bottom borders sind dotted
  • right und left borders sind solid

Alternativ werden mit den Eigenschaften border-bottom-style, border-top-style, border-left-style und border-right-style die vier Rahmen des Rechtecks definieren.

border-width

Mit border-width wird die Rahmenbreite (linienstärke) definiert, border-width ist nicht vererbbar.

div { 
  border-style: solid;
  border-width: 2px; 
}

Mögliche Werte für border-width

  • thin: dünn
  • medium: mittel
  • thick: dick
  • Längenangabe

Die border-width Eigenschaft kann wie border-style bis zu vier unterschiedliche Wertangaben aufnehmen. Die Reihenfolge ist dieselbe wie bei border-style. Alternativ werden mit den Eigenschaften border-bottom-width, border-top-width, border-left-width und border-right-width die vier Rahmenbreiten des Rechtecks definieren.

border-color

Mit border-color wird die Rahmenfarbe definiert, border-color ist nicht vererbbar.

div { 
  border-style: solid;
  border-width: 2px; 
  color-color: #f00;
}

Mögliche Werte für border-color

  • Farbangabe
  • transparent

Die border-color Eigenschaft kann wie border-style bis zu vier unterschiedliche Wertangaben aufnehmen. Die Reihenfolge ist dieselbe wie bei border-style. Alternativ werden mit den Eigenschaften border-bottom-color, border-top-color, border-left-color und border-right-color die vier Rahmenfarben des Rechtecks definieren.

border-top, border-bottom, border-left, border-right

Mit border-top, border-bottom, border-left und border-right gibt es noch eine Zusammenfassung der Rahmenseiten, diese Attribute sind nicht vererbbar.

div { 
  border-top: thick double #f00;
  border-bottom: thick double #f00; 
  border-left: 2px solid #0f0;
  border-right: 2px solid #0f0;
}

border

Mit border gibt es noch eine Zusammenfassung der Attribute border-color border-style border-width für alle vier Rahmenseiten. Die Reihenfolge der Angaben ist egal, border ist nicht vererbbar.

div { 
  border: thick double #f00;
}

border-top-right-radius, border-bottom-right-radius, border-bottom-right-radius, border-top-right-radius

Mit border-top-right-radius, border-bottom-right-radius, border-bottom-right-radius und border-top-right-radius gibt es noch die Möglichkeit eine oder mehrere der vier Ecken abzurunden, diese Attribute sind nicht vererbbar.

div {
  border: 2px solid #000;
  border-bottom-left-radius: 2em;
}

Mögliche Werte für border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius

  • Längenangabe
  • Prozentwert

border-radius

Mit border-radius steht wiederum eine Zusammenfassung zur Verfügung. Dabei ist die Reihenfolge zu beachten. Die Reihenfolge lautet:

  1. top-left
  2. top-right
  3. bottom-right
  4. bottom-left

Wenn bottom-left fehlt ist es gleich wie top-right. Wenn bottom-right fehlt ist es gleich wie top-left. Wenn top-right fehlt ist es gleich wie top-left. Wenn sie nur eine Angabe machen, werden alle Ecken gleich abgerundet.

div {
  border: 2px solid #000;
  border-radius: 2em;
}

Bilder als Rahmen

Mit der Eigenschaft border-image können Sie ein Bild festlegen, das anstelle des normalen Rahmens um ein Element herum verwendet werden soll.

Eigenschaft Bedeutung Wertzuweisung
border-image Zusammenfassung border-image-source border-image-slice border-image-width border-image-outset border-image-repeat, initial, inherit
border-image-source Bildpfad none, url(Bildpfad), initial, inherit
border-image-slice legt Einzelteile des Bildes fest Zahlen, Prozentwerte, fill, initial, inherit
border-image-width Bildbreite Längenangabe (Pixel), Zahlen, Prozentwerte, auto, initial, inherit
border-image-outset Bildbreite über dem Rand Längenangabe (Pixel), Zahlen, Prozentwerte, initial, inherit
border-image-repeat wie Bildteile in den Seitenrändern wiederholt werden stretch, repeat, round, space, initial, inherit;

border-image

border-image bietet die Möglichkeit, ein Bild als Rahmen zu verwenden. Dieses Bild ersetzt eine Rahmenlinie, die mit border definiert werden muss. Allerdings wird border-image von aktuellen Browsern nur mäßig unterstützt. Für border-image muss man noch proprietäre Eigenschaften verwenden. Internet Explorer 10 und frühere Versionen unterstützen border-image gar nicht, border-image ist nicht vererbbar.

div {
    border: 10px solid transparent;
    -webkit-border-image: url(rahmen.png) 30 repeat; /* Safari */
    -o-border-image: url(rahmen.png) 30 repeat; /* Opera*/
    border-image: url(rahmen.png) 30 repeat;
}

Mögliche Werte für border-image

  • border-image-source: Bildpfad
  • border-image-slice: Aufteilung des Bildes
  • border-image-width: Breite des Bildes
  • border-image-outset: Wert außerhalb des Bildrahmens
  • border-image-repeat: Bildwiederholung Slice wird ggf. abgeschnitten (repeat), Bild wird gedehnt keine Wiederholung (stretch), Bildwiederholung Größe wird angepasst (round), Bildwiederholung Leerraum wird angepasst (space)

Die border-image Eigenschaft ist eine Zusammenfassung der Attribute von border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat.

border-image-source

Mit border-image-source wird die Bildquelle (Pfad) definiert, border-image-source ist nicht vererbbar.

div {
    border: 10px solid transparent;
    -webkit-border-image-source: url(rahmen.png); /* Safari */
    -o-border-image-source: url(rahmen.png); /* Opera*/
    border-image-source: url(rahmen.png);
}

Mögliche Werte für border-image-source

  • none: kein Bild
  • url: Bildpfad

border-image-slice

Mit border-image-slice wird das Bild in Teile zerschnitten. Es sind bis zu vier Werte zum Eingeben (vier Ecken) plus das Attribut fill für den Mittelteil des Bildes. border-image-slice ist nicht vererbbar.

div {
    border: 10px solid transparent;
    -webkit-border-image-slice: 30 fill; /* Safari */
    -o-border-image-slice: 30 fill; /* Opera*/
    border-image-slice: 30 fill;
}

Mögliche Werte für border-image-slice

  • Zahl: repräsentiert Pixel bei Pixelgrafiken und Koordinaten bei Vektorgrafiken
  • Prozentwert
  • fill: Zusätzlicher Wert für den Mittelteil
  • Eine Angabe: alle 4 Schnitte gleich
  • Zwei Angaben: 1. oben und unten 2. links und rechts
  • Drei Angaben: 1. oben 2. links und rechts 3. unten
  • Vier Angaben: 1. oben 2. rechts 3. unten 4. links

border-image-width

Mit border-image-width wird die Breite des Bildrahmens definiert. Es sind bis zu vier Werte zum Eingeben bzw auto, border-image-width ist nicht vererbbar.

div {
    border: 10px solid transparent;
    -webkit-border-image-width: 30px 10px; /* Safari */
    -o-border-image-width: 30px 10px; /* Opera*/
    border-image-width: 30px 10px;
}

Mögliche Werte für border-image-width

  • Längenangabe: in Pixel
  • Zahl: 1 ist Standardwert abhängig der Breite im border-Attribut
  • Prozentwert
  • auto: abhängig vom Attribut image-slice

border-image-outset

border-image-outset beschreibt die Eigenschaft, wie weit das Bild aus dem Rahmen hinausragen soll, border-image-outset ist nicht vererbbar.

div {
    border: 10px solid transparent;
    -webkit-border-image-outset: 10px; /* Safari */
    -o-border-image-outset: 10px; /* Opera*/
    border-image-outset: 10px;
}

Mögliche Werte für border-image-outset

  • Längenangabe: in Pixel
  • Zahl: 1 ist Standardwert abhängig der Breite im border-Attribut

border-image-repeat

border-image-repeat beschreibt die Eigenschaft, wie Slices aufgeteilt werden, border-image-repeat ist nicht vererbbar.

div {
    border: 10px solid transparent;
    -webkit-border-image-repeat: stretch; /* Safari */
    -o-border-image-repeat: stretch; /* Opera*/
    border-image-repeat: stretch;
}

Mögliche Werte für border-image-repeat

  • stretch: Bild wird gedehnt keine Wiederholung
  • repeat: Bildwiederholung Slice wird ggf. abgeschnitten
  • round: Bildwiederholung Größe wird angepasst
  • slice: Bildwiederholung Leerraum wird angepasst

Hintergrund

Der Hintergrund für Absätze, Container oder andere Element kann in der Regel transparent, farbig oder ein Hintergrundbild sein. Auch Farbverläufe sind möglich.

Eigenschaft Bedeutung Wertzuweisung
background-color Hintergrundfarbe Farbangabe, transparent, initial, inherit
background-attachment Hintergrundbild, Verhalten bei Bewegung fixed, scroll, local, initial, inherit
background-image Hintergrundbild url(Pfadangabe), none, initial, inherit
background-position Position der linken, oberen Ecke left, right, center, top, bottom, center, Längenangabe, Prozentwert, initial, inherit
background-repeat Hintergrundbild wiederholen (Kacheln) no-repeat, repeat, repeat-x, repeat-y, initial, inherit
background-size Hintergrundbild skalieren auto, Längenangabe, Prozentangabe, cover, contain, initial, inherit
background-clip Hintergrundbereich definieren border-box, padding-box, content-box, initial, inherit
background-origin Hintergrundbild-Bereich border-box, padding-box, content-box, initial, inherit
background Zusammenfassung background-color background-image background-attachment background-repeat background-position/background-size background-clip background-origin, inherit

background-color

background-color erzeugt einen farbigen Hintergrund für ein Element, background-color ist nicht vererbbar.

p { background-color: rgb(255,0,255); }

Mögliche Werte für background-color

  • Farbangabe
  • transparent (Standard)

background-attachment

background-attachment definiert das Verhalten von Hintergrundbilder z.B. beim Scrollen, background-attachment ist nicht vererbbar.

div { background-attachment: fixed; }

Mögliche Werte für background-attachment

  • fixed: Ausrichtung am Viewport, wie position-fixed
  • scroll: Ausrichtung am Elternelement, wie position-absolute (Standard)
  • local: Ausrichtung am Elternelement, wie position-relative

background-image

Mit background-image fügen sie ein Hintergrundbild ein. Für den Notfall wird zusätzlich noch eine Hintergrundfarbe definiert, background-image ist nicht vererbbar.

div { 
  background-image: url("bg_bild.png");
  background-color: #00f;
}

Mögliche Werte für background-image

  • url: Pfadangabe
  • none: kein Bild

background-position

Die Position wird mit zwei Längenangaben geschrieben. Der erste Wert bezeichnet die Position in x-Richtung, der zweite die in y-Richtung. Auch negative Werte sind möglich. Wird nur ein Wert angegeben, ist dies die horizontale Position, der fehlende Wert wird mit center dargestellt. Der Ausgangswert ist 0 0 (links, oben), background-position ist nicht vererbbar.

div { 
  background-position: left bottom;
}

Mögliche Werte für background-position

  • Längenangabe
  • Prozentwert
  • left: horizontaler Wert
  • right: horizontaler Wert
  • center horizontaler Wert:
  • top: vertikaler Wert
  • bottom: vertikaler Wert
  • center: vertikaler Wert

background-repeat

Wenn sie ein Hintergrundbild einfügen wird dieses normalerweise gekachelt. Das heißt das Bild wird in x- und y-Richtung wiederholt, solange dafür Platz ist. Mit background-repeat können sie diese Verhalten ändern, background-repeat ist nicht vererbbar.

div { 
  background-repeat: no-repeat;
}

Mögliche Werte für background-repeat

  • repeat: Wiederholung (Standard)
  • no-repeat: keine Wiederholung<
  • repeat-x: Wiederholung in x-Richtung
  • repeat-y: Wiederholung in y-Richtung

background-size

Mit background-size können sie die Größe des Hintergrundbildes ändern. Standardmäßig behält das Bild seine ursprüngliche Größe, background-size passt das Bild an die Größe des Elements an. Bei Längenangaben schreiben sie zuerst die Breite (width) und dann die Höhe (height), background-size ist nicht vererbbar.

div { background-size: 100px 120px; }

Mögliche Werte für background-size

  • Längenangabe
  • Prozentangabe
  • auto: ursprüngliche Größe (Standard)
  • cover: Bildanpassung der kleineren Seite
  • contain: Bildanpassung der größeren Seite

background-clip

Mit background-clip bestimmen sie , welche Bereiche der Elementbox den definierten Hintergrund erhalten. Für das Verständnis diese Atrributes müssen sie sich vorher mit dem Kapitel "Box-Model" beschäftigen, background-clip ist nicht vererbbar.

div { background-clip: padding-box; }

Mögliche Werte für background-clip

  • border-box: Hintergrund für den gesamten Bereich inkl- Rahmen (Standard)
  • padding-box: Hintergrund für Content und Padding
  • content-box: Hintergrund für Content

background-origin

Ähnlich wie background-clip bestimmen sie mit background-origin welche Bereiche der Elementbox das definierten Hintergrundbild erhalten. background-origin ist auch in Kombination mit background-size möglich. Für das Verständnis diese Atrributes müssen sie sich vorher mit dem Kapitel "Box-Model" beschäftigen, background-origin ist nicht vererbbar.

div { background-origin: padding-box; }

Mögliche Werte für background-origin

  • border-box: Hintergrundbild 0 0 (Standard)
  • padding-box: Hintergrundbild Padding 0 0
  • content-box: Hintergrundbild Content 0 0

background

background bietet ein Zusammenfssung der Hintergrundformatierung an. Die Reihenfolge dabei spielt keine Rolle, nur ein paar Dinge muss man beachten:

  • background-size muss nach der Angabe background-position erfolgen Trennzeichen ist ein Slash (/)
  • background-origin muss irgendwo nach der Angabe background-clip erfolgen

background ist nicht vererbbar.

div { background:
  url(bg_bild.gif)         /* image */
  top center / 100px 120px /* position / size */
  no-repeat                /* repeat */
  fixed                    /* attachment */
  padding-box              /* origin */
  content-box              /* clip */
  red;                     /* color */
}

Farbverlauf als Hintergrund

Mit Farbverläufen (Gradienten) können Sie weiche Übergänge zwischen zwei oder mehreren Farben darstellen. CSS bietet uns dafür zwei Gradient-Typen, linear-gradient und radial-gradient. Für gradient-Attribute muss man noch proprietäre Eigenschaften verwenden. Internet Explorer 10 und frühere Versionen unterstützen gradient-Attribute gar nicht, gradient-Attribute sind nicht vererbbar.
Farbverläufe schreiben sie entweder mit dem Attribut background-image oder sie verwenden die Kurzfassung background.

Wertzuweisung Bedeutung Beschreibung
linear-gradient(direction, color-stop1, color-stop2, ...); linearer Farbverlauf Richtung, Farbangaben, Verlaufstopp
radial-gradient(shape size at position, start-color, ..., last-color); radialer Farbverlauf Form, Größe und Position, Innere Farbe, Äußere Farbe
repeating-linear-gradient(direction, color-stop1, color-stop2, ...); linearer Farbverlauf Richtung, Farbangaben, Verlaufstopp
repeating-radial-gradient(shape size at position, start-color, ..., last-color); radialer Farbverlauf Form, Größe und Position, Innere Farbe, Äußere Farbe

linear-gradient

Standardmäßig wird ein Farbverlauf von oben nach unten erzeugt (to bottom = 180deg). Wenn kein Farbstopp definiert ist teilt CSS die angegebenen Farben proportional auf.

.linear {
  background-image: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
  background-image: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
  background-image: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
  background-image: linear-gradient(red, blue); /* Standard syntax */
} 

Mögliche Werte für direction

Die Richtung des Farbverlaufs wird mit einer Richtungskonstante (z.B. to bottom) oder mit einem Winkelmaß (z.B. 180deg) geschrieben. Das Winkelmaß deg steht für degrees und beginnt bei mitte oben und dreht sich im Uhrzeigersinn.

  • to bottom = 180deg(Standard)
  • to bottom left = 225deg
  • to left = 270deg
  • to top left = 315deg
  • to top = 0deg
  • to top right = 45deg
  • to right = 90deg
  • to bottom right = 135deg
.linear {
  background-image: -webkit-linear-gradient(to bottom right red, blue, green); /* For Safari 5.1 to 6.0 */
  background-image: -o-linear-gradient(to bottom right red, blue, green); /* For Opera 11.1 to 12.0 */
  background-image: -moz-linear-gradient(to bottom right red, blue, green); /* For Firefox 3.6 to 15 */
  background-image: linear-gradient(to bottom right red, blue, green); /* Standard syntax */
} 

Jeder Farbangabe kann auch noch ein Farbstopp hinzugefügt werden. Für Farbstopps stehen Längenangaben (z.B. Pixel) oder Prozentangaben zur Verfügung:

.linear {
  background-image: -webkit-linear-gradient(red 30%, blue 100%); /* For Safari 5.1 to 6.0 */
  background-image: -o-linear-gradient(red 30%, blue 100%); /* For Opera 11.1 to 12.0 */
  background-image: -moz-linear-gradient(red 30%, blue 100%); /* For Firefox 3.6 to 15 */
  background-image: linear-gradient(red 30%, blue 100%); /* Standard syntax */
} 

repeating-linear-gradient

Wenn Farbstopps kleiner 100% sind wird mit repeating-linear-gradient der Verlauf wiederholt.

.linear {
  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
} 

radial-gradient

Ein radialer Farbverlauf geht von einem definierten Mittelpunkt nach außen. Die Form kann entweder Ellipse oder Kreis sein. Wenn nicht angegeben wird ellipse als Form verwendet, size ist farthest-corner (am entfernteste Ecke vom definierten Mittelpunkt) und position (Mittelpunkt) ist center. Auch Farbstopps können geschrieben werden.

.radial {
  background-image: -webkit-radial-gradient(red, green, blue);
  background-image: -o-radial-gradient(red, green, blue);
  background-image: -moz-radial-gradient(red, green, blue);
  background-image: radial-gradient(red, green, blue);
} 

Mögliche Werte für shape

  1. ellipse (standard)
  2. circle

Mögliche Werte für size

  1. farthest-side: entfernteste Seite (Standard)
  2. closest-side: naheste Seite
  3. farthest-corner: entfernteste Ecke
  4. closest-corner: naheste Ecke

Mögliche Werte für position

  1. center (standard)
  2. Längenangabe für x- und y-Position (z.B. 20% 40%
.radial {
  background-image: -webkit-radial-gradient(circle closest-side at 60% 55%,blue10%, black 30%, red 100% );
  background-image: -o-radial-gradient(circle closest-side at 60% 55%,blue10%, black 30%, red 100% );
  background-image: -moz-radial-gradient(circle closest-side at 60% 55%,blue10%, black 30%, red 100% );
  background-image: radial-gradient(circle closest-side at 60% 55%,blue10%, black 30%, red 100% );
} 

repeating-radial-gradient

Wenn Farbstopps kleiner 100% sind wird mit repeating-radial-gradient der Verlauf wiederholt.

.linear {
  background-image: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
  background-image: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
  background-image: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
} 

Zusammenfassung mit background

Auch für Farbverläufe steht das zusammnenfassende Attribut backround zur Verfügung. Die beiden folgenden Anweisung bedeuten jeweils dasselbe:

  background-image: radial-gradient(red, green, blue);
  background: radial-gradient(red, green, blue);
  background-image: linear-gradient(red, blue);
  background: linear-gradient(red, blue);

scharfe Übergänge

Scharfe Übergänge, also Farbübergänge ohne Verlauf erreicht man durch die Festlegung von zwei Farben an einem Ort.

.german {
  background: linear-gradient(black 33.3%, red 33.3%, red 66.6%, gold 66.6%);
}
.kreise {
  background: repeating-radial-gradient(circle, black, black 5px, white 5px, white 10px);
}  

Schatteneffekt mit box-shadow

Mit box-shadow kann einer Box auch ein dekorativer Schatten zugewiesen werden. Der Schatteneffekt kann sowohl Innen als auch Außen sein.

Syntax Beschreibung
box-shadow: [horizontal offset] [vertical offset] [blur] [spread] [color] äußerer Schatten
box-shadow: inset [horizontal offset] [vertical offset] [blur] [spread] [color] innerer Schatten
box-shadow: none, inherit, initial Weitere Werte

box-shadow

Die box-shadow-Eigenschaft beinhaltet 2 bis 4 Längenangeben (keine Prozentwerte) für den horizontalen- und vertikalen Abstand (offset), den optionalen Weichzeichner (blur), den optionalen Vergrößerungsfaktor (spread) und eine optionale Farbe (color). Falls color nicht definiert wird bekommt der Schatten eine schwarze Farbe.

Syntaxbeschreibung von box-shadow

  • horizontal offset: Längenangabe für die horizontale Verschiebung (positive oder negative Werte)
  • vertical offset: Längenangabe für die vertikale Verschiebung (positive oder negative Werte)
  • blur: Längenangabe für Weichzeichner - Optional
  • spread: Längenangabe für Schattengröße (positive oder negative Werte) - Optional
  • color: Farbangabe - Optional
  • inset: Schatteneffekt nach innen- Optional
  • none: kein Schatten (Standardwert)
#element {
  padding: 20px;
  background-color: white;
  color: #222;
  margin: 50px auto 100px;
  height: 200px;
  width: 200px;
  border: 10px solid black;
  box-shadow: 1em 1em 1em purple;
}

Box Shadow Spread
W3school Play It

Mit box-shadow können auch mehrere Schatteneffekte erzeugt werden. Als Trennzeichen wird das Komma verwendet.

  box-shadow: 1em 1em 1em purple, inset 10px 10px;