CSS/Tutorials/Hintergrund/äußere Gestaltung

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Grundsätzlich haben die meisten HTML-Elemente einen transparenten Hintergund und keinen Rahmen. Mit den border-…-Eigenschaften, aber auch mit box-shadow und outline können Sie auf vielfältige Weise Rahmen definieren.

Rahmendefinitionen können dazu führen, dass die Inhalte von Elementen sehr nah an dem sie umgebenden Rahmen kleben. Zu diesem Zweck können Sie Innenabstände definieren. Dadurch schaffen Sie einen Abstand zwischen dem Rahmen und seinem Inhalt.

Für alle Elemente können folgende Eigenschaften Anwendung finden:

  • border als zusammenfassende Eigenschaft von
    • border-width als zusammen­fassende Eigenschaft von
      • border-top-width,
      • border-right-width,
      • border-bottom-width,
      • border-left-width
    • border-style als zusammen­fassende Eigenschaft von
      • border-top-style
      • border-right-style
      • border-bottom-style
      • border-left-style
    • border-color als zusammen­fassende Eigenschaft von
      • border-top-color,
      • border-right-color,
      • border-bottom-color,
      • border-left-color
  • border-top als zusammen­fassende Eigenschaft von
    • border-top-width
    • border-top-style
    • border-top-color
  • border-right als zusammen­fassende Eigenschaft von
    • border-right-width
    • border-right-style
    • border-right-color
  • border-bottom als zusammen­fassende Eigenschaft von
    • border-bottom-width
    • border-bottom-style
    • border-bottom-color
  • border-left als zusammen­fassende Eigenschaft von
    • border-left-width
    • border-left-style
    • border-left-color
  • border-radius als zusammenfassende Eigenschaft von
    • border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius
  • border-image als zusammenfassende Eigenschaft von
    • border-image-source
    • border-image-slice
    • border-image-width
    • border-image-outset
    • border-image-repeat

Für Rahmen von Tabellenzellen können zudem folgende Eigenschaften Verwendung finden:

border[Bearbeiten]

Mit der border-Eigenschaft können Sie das Aussehen eines Rahmens um ein Element bestimmen. Sie ist eine Zusammenfassung der möglichen Einzelangaben zu Rahmendicke, Rahmentyp und Rahmenfarbe.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 1.0
Beachten Sie, dass die Breite des Rahmen zur Breite des Elements dazugerechnet wird. Mit box-sizing können Sie dies unterbinden.

alle Seiten eines Elements[Bearbeiten]

Notieren Sie Angaben zu Linienstärke, Rahmentyp und Farbe mit Leerzeichen dazwischen:

Randlinien ansehen …
.one {
	border: medium solid red;
}

.two {
	border: thick dotted red;
}

.three {
	border: 1em groove red;
}

.four {
	border: 1em ridge red;
}

.five {
	border: 1em inset red;
}

.six {
	border: 1em outset red;
}

.seven {
	border-width: 1em;
	border-style: solid;
	border-color: red blue yellow green;
}

.eight {
	border: 1em double red;
	border-radius: 1em;
}

.nine {
	border: 1em dashed red;
	border-radius: 50%;
}

.ten {
	border: .5em solid red;
	outline: .5em solid blue;
	box-shadow: 0 0 0 .5em yellow inset;
}
Das Beispiel enthält 10 div-Elemente, die über ihre Selektoren unterschiedliche Rahmen erhalten:
  • Box 1 erhält einen medium breiten festen (solid) roten Rahmen.
  • Box 2 hat nur einen breiten (thick), gepunkteten Rahmen (dotted).
  • Box 3 -6 erhalten mit den Schlüsselwörtern groove, ridge, inset und outset einen 3d-Effekt. Die Rahmenfarben werden vom Browser aus dem angegebenen Farbwert berechnet.
  • Box 7 zeigt, wie Sie über mehrfache Angaben der Einzeleigenschaft border-color jede Seite des Rahmens in der gewünschten Farbe darstellen können.
  • Box 8 erhält mit double einen doppelten Rahmen, der mit border-radius abgerundete Ecken erhält.
  • Box 9 hat eine gestrichelte Linie (dashed) und einen border-radius von 50%.
  • Box 10 ist ein Beispiel für mehrere Konturlinien. Dabei ist nur der rote Streifen ein Rand. Der blaue Streifen besteht aus einer Außenlinie outline, die sich außerhalb der border-box befindet (und deshalb z. B. nicht anklickbar ist). Der gelbe Rand ist ein Innenschatten, der mit box-shadow realisiert wurde.

Die Reihenfolge der Angaben ist egal. Es dürfen dabei auch nur eine oder zwei Angaben gemacht werden. Bei fehlender Farbangabe ist die Voreinstellung die Textfarbe des Elements, bei fehlender Rahmenstärke ist die Voreinstellung medium.

Hinweis

Obwohl die Reihenfolge der Angaben beliebig ist und keine Verwechslungsgefahr besteht, sollten Sie dennoch konsequent bei einer Notation bleiben. Die meisten Werkzeuge zur Fehlersuche verwenden die Reihenfolge border: width style color;.

einzelne Seiten eines Elements[Bearbeiten]

Daneben können Sie zusammenhängende Angaben für Rahmendicke, Rahmenfarbe und Rahmentyp auch für einzelne Seiten des Elements machen.

  • border-top definiert eine zusammenhängende Angabe für oben,
  • border-right für rechts,
  • border-bottom für unten und
  • border-left für links.
Beachten Sie: Eine weitere Zusammenfassung wie zum Beispiel border: 1px solid red 3px dotted green; ist nicht möglich.
Randlinien an einzelnen Seiten ansehen …
      h2 {
        border-bottom: thick double blue;
        float: left;
        width: 48%;
      }
      h2.anders {
        border-bottom: medium solid blue;
        float: right;
      }
      p {
        border: 1px solid red;
        width: 30em;
        padding: 5px;
        clear: both;
      }
      p.beachten {
        border: none;
        border-left: 5px solid #FFCCCC;
      }
  • Überschriften nehmen als Block-Elemente normalerweise die gesamte Fensterbreite ein. Die Angaben zu float bei den Überschriften stellen sicher, dass diese nur so breit sind, wie ihr Inhalt es erfordert. Näheres dazu finden Sie unter CSS/Eigenschaften/float.
  • Für den Absatz mit der Klasse „beachten“ gilt wie für alle Absätze zunächst einmal ein kompletter roter Rahmen. Da dieser nicht erwünscht ist, wird er mit border: none; entfernt, bevor der linke Rahmen gesetzt wird.

border-width[Bearbeiten]

Sie können mit der Eigenschaft border-width für ein Element die Rahmendicke bestimmen. Sinnvollerweise sollten Sie diese Angabe zumindest mit einer Angabe zum Rahmentyp kombinieren, gegebenenfalls aber auch mit einer Festlegung der Rahmenfarbe.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 1.0

Erlaubt ist eine numerische Angabe (mit Ausnahme von Prozentwerten) für die Rahmendicke oder einer der folgenden Werte:

  • thin = dünn.
  • medium = mittelstark.
  • thick = dick.
  • inherit = Übernehmen der Rahmendicke vom Elternelement.
Beachten Sie: Eine Angabe für die Rahmendicke wird nur interpretiert, wenn auch eine Angabe für den Rahmentyp erfolgt.
Beispiel ansehen …
p {
  width: 30em;
  padding: 0 1em;
}
	
.links {
  border-left-width: medium;
  border-left-style: solid;
  border-color: #fcc;
}

.linksrechts {
  border-left-width: thick;
  border-left-style: solid;
  border-left-color: red;
  border-right-width: 1.5em;
  border-right-style: solid;
  border-right-color: green;
}

.rundrum {
  background-color: lightgray;
  border-width: 6px;
  border-style: solid;
  border-color: gray;
  border-right-color: black;
  border-bottom-color: black;
}

border-color[Bearbeiten]

Sie können mit der Eigenschaft border-color für ein Element die Rahmenfarbe bestimmen. Die Angabe dazu sollten Sie mit einer Angabe zum Rahmentyp und/oder einer Angabe zur Rahmendicke kombinieren.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 1.0

Folgende Angaben sind möglich:

  • currentColor: Standardwert, aktuell festgelegte Farbe
  • transparent
  • Farbangabe: eine, oder mehrere Farbwerte. (Wenn mehrere Werte angegeben werden, gelten Sie für oben, rechts, unten, links)

Sie können einen Rahmen auch mit einem Farbverlauf einfärben, wenn Sie die Eigenschaft border-image verwenden.

border-style[Bearbeiten]

Mit der Eigenschaft border-style können Sie verschiedene Rahmentyp definieren. Damit die Typen zur Geltung kommen, empfiehlt sich die Kombination mit Angaben zur Rahmendicke und/oder zur Rahmenfarbe.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 1.0

Erlaubt ist eine der folgenden Angaben

  • none = kein Rahmen (bzw. unsichtbarer Rahmen).
  • hidden = kein Rahmen (bzw. unsichtbarer Rahmen), gedacht für Tabellenzellen
  • dotted = gepunktet.
  • dashed = gestrichelt.
  • solid = durchgezogen.
  • double = doppelt durchgezogen.
  • groove = 3D-Effekt.
  • ridge = 3D-Effekt.
  • inset = 3D-Effekt.
  • outset = 3D-Effekt.
Beispiel ansehen …
p {
  border-width: 1em; 
  border-color: red;
}

.gepunktet    {border-style: dotted;}
.gestrichelt  {border-style: dashed;}
.durchgezogen {border-style: solid;}
.doppelt      {border-style: double;}
.gerillt      {border-style: groove;}
.kammfoermig  {border-style: ridge;}
.inset        {border-style: inset;}
.outset       {border-style: outset;}

Um unter Verwendung der Eigenschaft border-style für einzelne Seiten des Elements einen unterschiedlichen Rahmentyp zu bestimmen, sind folgende Regeln zu beachten:

  • Eine Angabe: für alle 4 Rahmen gilt derselbe Wert
  • Zwei Angaben: 1. Wert für oben und unten, 2. Wert für links und rechts
  • Drei Angaben: 1. Wert für oben, 2. Wert für links und rechts, 3. Wert für unten
  • Vier Angaben: 1. Wert für oben, 2. Wert für rechts, 3. Wert für unten, 4. Wert für links
Beachten Sie: Die Werte werden nicht durch Kommata getrennt.

Außerdem können Sie entsprechende Werte für die Eigenschaften

  • border-top-style, den Rahmentyp für oben,
  • border-right-style, den Rahmentyp für rechts,
  • border-bottom-style, den Rahmentyp für unten und
  • border-left-style, den Rahmentyp für links

setzen.

variable Länge der Strichelung[Bearbeiten]

Wie die Strichelung bei border-style: dashed ausgeführt wird entscheidet der Browser. Eine Festlegung der Strichlänge ist nicht vorgesehen. In der zukünftigen CSS Backgrounds and Borders Module Level 4 ist dafür eine border-clip-Eigenschaft geplant.

In SVG können Sie mit stroke-dasharray Länge und Rhythmus der Strichelung von Konturen frei gestalten.

Dreiecke mit CSS erzeugen[Bearbeiten]

Zur Jahrtausendwende gab es CSS-Hacks, mit denen Sie geometrische Formen nur mit CSS ohne den Einsatz externer Grafiken erzielen konnten. Diese fanden z. B. bei Weiter-Links oder Buttons Verwendung:<ref>Information on Border Slants Zeichnen von geometrischen Formen mithilfe der CSS-border-Eigenschaft<ref>

Dreiecke mit CSS erzeugen ansehen …
div {
	border-style: solid;
	border-top-color: yellow;
	border-right-color: green;
	border-bottom-color: blue;		
	border-left-color: red;
	
}

#slant {
  border-width: 1em;	
  width: 4em;
  height: 4em;	
  animation: slant 3s infinite alternate linear;
}

@keyframes slant {
  0 {
    width: 4em;
    height: 4em;
    border-width: 1em;
  }
  100% {
    width: 0;
    height: 0;
    border-width: 3em;
    border-color: transparent;
    border-bottom-color: blue;		
  }
}

#slant2 {
    width: 0;
    height: 0;
    border-width: 3em;	
    animation: slant2 3s infinite alternate linear;
}

{{BeispielText| Das obere 5x5em große div hat einen 1em breiten Rand. Durch die Animation slant wird die Randstärke so weit vergrößert und die Höhe und Breite reduziert, dass schließlich nur noch der untere Rand in Form eines Dreiecks sichtbar ist.

Im unteren div wird gezeigt, wie dieses Dreieck durch unterschiedliche Werte für die einzelnen Seitenränder gestaltet werden kann.

Empfehlung: Heute bietet der Einsatz von SVG bessere und einfachere Möglichkeiten.

border-radius[Bearbeiten]

Sie können für ein Element mit der Eigenschaft border-radius den Radius bestimmen, mit dem die Ecken abgerundet werden. In Verbindung mit Rahmendicke, Rahmentyp und Rahmenfarbe wird eine entsprechende abgerundete Rahmenlinie gezeichnet. Der Hintergrund des Elements wird entlang der Kurve abgeschnitten, auch wenn keine sichtbare Rahmenlinie vorhanden ist.

  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
  • CSS 3.0

Mögliche Werte:

  • 1-4 Längenangaben oder Prozentwerte, es sind auch Wertepaare möglich

alle Ecken eines Elements[Bearbeiten]

ein Wert für alle Ecken ansehen …
#rund1 {
  border-radius: 1em;
}

#rund2 {
  border-radius: 1em;
  border: 0;
  background: red;
}

#rund3 {
  border-radius: 4em/1em;
}

#rund4 {
  border-radius: 50%;
  width: 6em;
  height: 6em;
}
Ein div erhält über seine id-Selektoren jeweils unterschiedliche CSS-Festlegungen:
  • Box 1 erhält einen Radius von 1em
  • Box 2 hat den gleichen Radius, aber durch border: 0; keine Randlinie, dafür aber einen roten Hintergrund, der entlang des Radius abgeschnitten wird.
  • Box 3 erhält als Radius ein Wertepaar border-radius: 4em/1em;
  • Box 4 erhält als Radius ein Wertepaar border-radius: 10%/10%;
  • Box 5 erhält als Radius ein Wertepaar border-radius: 40%/40%;
    Diese abgerundeten Ecken sind nicht gleichmäßig, da die Prozentzahlen sich auf die unterscheidliche Breite und Höhe des Elements beziehen.
  • Box 6 ist kreisrund, da der Radius 50% der (gleichgroßen) Höhe und Breite beträgt.

Die Angabe eines Wertepaares erzeugt eine elliptische Abrundung, wobei der erste Wert für die horizontale und der zweite Wert für die vertikale Halbachse steht. Eine Prozent-Angabe für die horizontale Halbachse bezieht sich auf die halbe Breite des Elements, eine Prozent-Angabe für die vertikale Halbachse auf die halbe Höhe. Wird nur ein Wert angegeben, so entsteht eine kreisförmige Abrundung. border-radius: 1em; ist identisch zu border-radius: 1em/1em;

einzelne Ecken eines Elements[Bearbeiten]

Um für einzelne Seiten des Elements mit der Eigenschaft border-radius eine unterschiedliche Rahmendicke zu bestimmen, beachten Sie folgende Regeln:

  • Eine Angabe: derselbe Wert gilt für alle vier Ecken
  • Zwei Angaben: 1. Wert für oben-links und unten-rechts, 2. Wert für oben-rechts und unten-links
  • Drei Angaben: 1. Wert für oben-links, 2. Wert für oben-rechts und unten-links, 3. Wert für unten-rechts
  • 'Vier' Angaben: 1. Wert für oben-links, 2. Wert für oben-rechts, 3. Wert für unten-rechts, 4. Wert für unten-links
Beachten Sie: Die Werte werden nicht durch Kommata getrennt.

Außerdem können Sie entsprechende Werte für

  • border-top-right-radius, definiert die Abrundung für oben rechts,
  • border-bottom-right-radius, die Abrundung für unten rechts,
  • border-bottom-left-radius, die Abrundung für unten links und
  • border-top-left-radius, die Abrundung für oben links

angeben.

Werte für einzelne Ecken ansehen …
#rund1 {
  border-radius: 1em 3em;
}

#rund2 {
  border-radius: 1em 2em 3em 4em;
}

#rund3 {
  border-radius: 0 1em 2em;
}

h1 {
 height:2em;
 text-align: center;
 background-image: linear-gradient(yellow, orange, red);
 border-bottom-left-radius: 10% 50%;
 border-bottom-right-radius: 10% 50%;
}
Ein div erhält über seine id-Selektoren jeweils unterschiedliche CSS-Festlegungen:
  • Box 1 erhält zwei Werte:
    • 1em-Radius links-oben und rechts-unten
    • 3em-Radius rechts-oben und gegenüber
  • Box 2 hat 4 Werte für die Ecken im Uhrzeigersinn von links oben ausgehend
  • Box 3 hat 3 Werte
    • der 1. Wert entspricht links oben
    • der 2. Wert rechts oben
    • der 3. Wert rechts unten
    • da kein 4. Wert festgelegt ist, erhält die linke, untere Ecke den 2. Wert der gegenüberliegenden Ecke zugewiesen


Auch die h1-Überschrift erhält in den linken unteren und rechten unteren Ecken einen Radius.

geometrische Formen[Bearbeiten]

Mit border-radius sind auch geometrische Formen möglich:

Werte für einzelne Ecken ansehen …
#rund {
  border-radius: 50%;
  width: 6em;
  height: 6em;
}

#rund8 {
  border-radius: 50%;
}

#rund9 {
  border: 0;
}

#rund9::after {
  content: '';
  height: 0;
  width: 0;
  border: 5em solid transparent;
  border-bottom: 5em solid red;
  border-radius: 50%;
}
Ein div erhält über seine id-Selektoren jeweils unterschiedliche CSS-Festlegungen:
  • Box 1 wird bei gleicher Höhe und Breite mit border-radius: 50%; zum Kreis
  • Box 2 hat eine größere Breite, sodass das div-Element als Oval dargestellt wird.
  • Box 3 hat ein ::after-Pseudoelement mit einer Höhe und Breite von 0, das aber einen 5em breiten, transparenten Rand mit einem border-radius von 50% hat. Der untere Rand erhält nun eine rote Färbung. Da die linken und rechten Ränder transparent sind, läuft die Spitze auf das 0px große div zu.
Empfehlung: Zur Jahrtausendwende gab es CSS-Hacks, mit denen Sie geometrische Formen nur mit CSS ohne den Einsatz externer Grafiken erzielen konnten. Heute bietet der Einsatz von SVG bessere und einfachere Möglichkeiten.

Rückblick: Runde und andere Ecken für skalierbare Boxen im Jahre 2004[Bearbeiten]

Heute ist fast schon vergessen, dass noch vor ein paar Jahren abgerundete Ecken nur unter großen Verrenkungen erreicht werden konnten: Der Selfhtml-aktuell-Artikel Runde und andere Ecken für skalierbare Boxen von Andreas Kalt vom 05.02.2004 zeigt, wie man eine skalierbare Box mit grafischer Umrahmung mittels mehrerer divs und Hintergrundgrafiken gestalten musste, um den gleichen Effekt wie mit border-radius zu erzielen.

Erst 2011 zog mit dem IE9 auch der letzte große Browser-Hersteller nach und unterstützte die border-radius-Eigenschaft.

box-decoration-break[Bearbeiten]

Die Eigenschaft box-decoration-break legt fest, wie mit Hintergründen und Rahmen zu verfahren ist, falls die Element-Box in mehrere Fragmente geteilt werden muss. Das kann etwa geschehen, wenn ein Blockelement beim Ausdrucken auf zwei Blätter verteilt wird oder ein inline-Element mehrere Zeilen beansprucht.

  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

Details: caniuse.com

box-decoration-break ansehen …
.beispiel h3 {
      display: inline;
      line-height: 3;
      background-image: linear-gradient(to right, #df6c20 30%, #ffede0 70%);
      border: 3px solid #df6c20;
      border-radius: .5em;
      box-shadow: .2em .2em .5em #df6c20;
      margin: 1em;
      padding: .3em 1em;
        
      box-decoration-break: slice;
            
}
.clone h3 {
      box-decoration-break: clone;
}
Für die Überschriften im Beispiel, die als inline-Elemente dargestellt werden, sind verschiedene Angaben zu Hintergründen, Rahmen und Abständen gemacht worden. Die Gegenüberstellung zeigt die Auswirkungen der verschiedenen Werte.

Mit box-decoration-break bestimmen Sie das Verhalten unterbrochener Boxen. Folgende Angaben sind möglich:

  • clone, jeder Teilbereich bekommt seinen eigenen Hintergrund und Rahmen
  • slice, es wird nur ein Hintergrund und ein Rahmen dargestellt, Voreinstellung.

Wird box-decoration-break: clone; gewählt, so wird ggf. für jede einzelne Box der Hintergrund neu ermittelt, das betrifft die Werte für

Ebenso bekommt jede Box ihre eigenen

sowie

Die Außenlinie ist hingegen nicht betroffen.


Achtung!

Die Eigenschaft box-decoration-break ist derzeit (Stand: OKtober 2020) noch nicht in alle aktuellen Browser implementiert, deshalb muss man proprietäre Eigenschaften verwenden:
für Chrome, Opera, Safari -webkit-box-decoration-break
für Android-Browser -webkit-box-decoration-break

Details: caniuse.com

Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.

box-shadow[Bearbeiten]

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)
verschiedene Bespiele mit box-shadow 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.

Kennzeichnung von Links mit box-shadow[Bearbeiten]

Links erhalten bei :hover oft einen andersfarbigen Hintergrund. Dafür können sie anstelle der background-Eigenschaft auch box-shadow verwenden und mit transition einen weichen Übergang zwischen den Zuständen realisieren:

animierter Hintergund mit box-shadow ansehen …
a {
  color: blue;
  box-shadow: inset 0 -3px 0 -1px blue;
  padding: .25em 0;
  text-decoration: none;
  transition: all .5s;
}

a:hover,
a:focus {
  box-shadow: inset 0 -30px 0 skyblue;
}
Das Beispiel enthält drei Links. Sie sind durch die blaue Textfarbe und die blaue Unterstreichung mehrfach gekennzeichnet.
Dabei wird die Unterstreichung aber nicht mit text-decoration:underline realisiert, sondern durch einen scharfen Innenschatten. Wenn das Link-Element den Fokus erhält, wird der Innenschatten über die gesamte Fläche vergößert und wirkt nun nicht mehr als Unterstreichung, sondern als jetzt (hellerer) Hintergrund, da auch die Farbangabe geändert wurde.

Siehe auch

outline[Bearbeiten]

Dieser Artikel beschreibt die CSS-Eigenschaft outline. Für die Struktur eines HTML-Dokuments siehe HTML/outline.


Mit den outline-…-Eigenschaften können Sie auf vielfältige Weise für ein Element eine Außenlinie festlegen.

Für alle Elemente können folgende Eigenschaften Anwendung finden

Empfehlung: zum besseren Verständnis wird das Studium des Artikels zum Box-Modell empfohlen

Die Eigenschaft outline orientiert sich, im Gegensatz zu den border-Eigenschaften nicht an rechteckigen Blöcken, sondern ist explizit als „Rahmen für nicht-rechteckige Bereiche“ definiert. Außerdem wird die Dicke der outline nicht zur Elementgröße hinzugerechnet, sondern als letzter Schritt „draufgemalt“, ohne Platz wegzunehmen. Im Gegensatz zu den border-Rahmen können outline-Rahmen aber nur vollständig geschlossen zugewiesen werden, es fehlt die Möglichkeit, separate Angaben für oben, unten, links oder rechts zu machen. Vergleichen Sie am besten die Beispiele zu outline und border, um den Unterschied zu verstehen.

Außenlinien (und Rahmen) ansehen …
      
p { width: 30em; padding: 1em; margin: 3em; background-color: lightgrey; }
.outline { outline: 1em solid green; }
.border  { border: 1em solid red; border-radius: 1em; }
</source>

Mit outline können Sie das Aussehen einer Außenlinie um ein Element bestimmen. Notieren Sie Angaben zu Linienstärke, Typ und Farbe mit Leerzeichen dazwischen.

Die Reihenfolge der Angaben ist egal. Es dürfen dabei auch nur eine oder zwei Angaben gemacht werden. Bei fehlender Farbangabe ist die Voreinstellung die Textfarbe des Elements, bei fehlender Rahmenstärke ist die Voreinstellung medium.

Hinweis

Obwohl die Reihenfolge der Angaben beliebig ist und keine Verwechslungsgefahr besteht, sollten Sie dennoch konsequent bei einer Notation bleiben. Die meisten Werkzeuge zur Fehlersuche verwenden die Reihenfolge outline: width style color;.
Beachten Sie: Zusammenhängende Angaben für einzelne Seiten des Elements sind nicht möglich.
Beachten Sie: Zur Zeit (Version 37) scheint der Firefox die Farbangabe invert nicht in dieser Kurzschreibweise zu akzeptieren. Notiert man dagegen alle Eigenschaften einzeln, interpretiert Firefox dagegen auch diesen Farbwert korrekt (vgl. Beispiel zu outline-color).

Beachten Sie das unterschiedliche Verhalten des Rahmens bei Inline-Elementen, wenn der darin enthaltene Text sich auf mehrere Zeilen verteilt. outline sorgt dafür, dass jeder einzelne Textabschnitt vollständig von einem Rahmen umschlossen ist, auch wenn die einzelnen Stücke nicht zusammenhängend platziert werden können. Bei border hingegen wird eventuell eine Seite eines Teilstückes offengelassen.

Beispiel ansehen …
	   
p { width: 15em; line-height: 2; }
span { padding: .1em .5em; }
.border  { border: 2px solid red; }
.outline { outline: 2px solid green; }

Für den Rahmen können Sie dieses Verhalten mit der Eigenschaft box-decoration-break steuern.

outline-offset[Bearbeiten]

Durch die Eigenschaft outline-offset können Sie den Abstand zwischen der Rahmenlinie (border) und der Außenlinie (outline) bestimmen. Erlaubt ist eine numerische Angabe.

  • CSS 3.0
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

Details: caniuse.com

Abstand zwischen Rahmen und Außenline ansehen …
      p {
        background-color: white;
        margin: 3em;
        padding: 1em;
        width: 30em;
      }
      .outline {
        outline: 1em solid green;
        outline-offset: 1em;
      }
      .border { border: 1em solid red; }


Weblinks[Bearbeiten]