The CSS Podcast – 016: Ränder
Im Modul zum Boxmodell haben wir eine Frame-Analogie verwendet, um die einzelnen Bereiche des Boxmodells zu beschreiben.
Der Rahmen ist der Rahmen Ihrer Felder. Mit den border
-Eigenschaften haben Sie eine große Auswahl an Optionen, um diesen Rahmen in nahezu jedem Stil zu erstellen.
Rahmeneigenschaften
Mit den einzelnen border
-Eigenschaften können Sie die verschiedenen Teile eines Rahmens stylen.
Stil
Damit ein Rahmen angezeigt wird, müssen Sie border-style
definieren.
Es gibt mehrere Möglichkeiten:
Bei den Stilen ridge
, inset
, outset
und groove
verdunkelt der Browser die Rahmenfarbe für die zweite angezeigte Farbe, um Kontrast und Tiefe zu schaffen.
Dieses Verhalten kann je nach Browser variieren, insbesondere bei dunklen Farben wie black
.
In Chrome werden diese Rahmenstile als durchgehend angezeigt, in Firefox werden sie aufgehellt, um dann eine dunklere zweite Farbe zu erhalten.
Das Browserverhalten kann auch bei anderen Rahmenstilen variieren. Daher ist es wichtig, Ihre Website in verschiedenen Browsern zu testen.
Ein häufiges Beispiel für diesen Unterschied ist die Darstellung der Stile dotted
und dashed
in verschiedenen Browsern.
Mit border-top-style
, border-right-style
, border-left-style
und border-bottom-style
können Sie den Rahmenstil für jede Seite des Felds festlegen.
Kurzschreibweise
Wie bei margin
und padding
können Sie mit der Kurzschreibweise border
alle Teile des Rahmens in einer Deklaration definieren.
.my-element {
border: 1px solid red;
}
Die Werte in der Kurzform border
werden in der Reihenfolge border-width
, border-style
und dann border-color
angeordnet.
Farbe
Mit border-color
können Sie die Farbe für alle Seiten des Felds oder für jede Seite einzeln festlegen.
Standardmäßig wird die aktuelle Textfarbe des Felds verwendet: currentColor
.
Wenn Sie also nur Rahmeneigenschaften wie die Breite angeben, wird die Farbe zu diesem berechneten Wert, sofern Sie sie nicht explizit festlegen.
.my-element {
color: blue;
border: solid; /* Will be a blue border */
}
.my-element {
color: blue;
border: solid yellow;
}
Wenn Sie für jede Seite des Felds eine Rahmenfarbe festlegen möchten, verwenden Sie border-top-color
, border-right-color
, border-left-color
und border-bottom-color
.
Breite
Die Breite eines Rahmens gibt die Dicke der Linie an und wird durch border-width
gesteuert.
Die Standardrandbreite ist medium
.
Dieser ist jedoch nur sichtbar, wenn Sie einen Stil definieren.
Sie können auch andere benannte Breiten wie thin
und thick
verwenden.
Für die border-width
-Properties ist auch eine Längeneinheit wie px
, em
, rem
oder %
zulässig.
Verwenden Sie border-top-width
, border-right-width
, border-left-width
und border-bottom-width
, um die Rahmenbreite für jede Seite des Felds festzulegen.
Logische Properties
Im Modul Logische Eigenschaften haben Sie gelernt, wie Sie sich auf Blockfluss und Inline-Fluss beziehen, anstatt auf die expliziten Seiten oben, rechts, unten oder links.
Diese Funktion ist auch für Rahmen verfügbar:
.my-element {
border: 2px dotted;
border-inline-end: 2px solid red;
}
In diesem Beispiel haben alle Seiten von .my-element
einen gepunkteten Rahmen 2px
, der der aktuellen Textfarbe entspricht.
Der Rahmen von inline-end
wird dann als 2px
, durchgehend und rot definiert.
In linksläufigen Sprachen wie Deutsch befindet sich der rote Rahmen also rechts im Feld.
Bei rechtsläufigen Sprachen wie Arabisch befindet sich der rote Rahmen links im Feld.
Die Browserunterstützung für logische Eigenschaften in Rahmen ist unterschiedlich. Informieren Sie sich daher vor der Verwendung über die Unterstützung.
Rahmenradius
Verwenden Sie das Attribut border-radius
, um einem Feld abgerundete Ecken zu geben.
.my-element {
border-radius: 1em;
}
Mit dieser Kurzschreibweise wird jeder Ecke des Felds ein einheitlicher Rahmen hinzugefügt.
Wie bei den anderen Rahmeneigenschaften können Sie den Rahmenradius für jede Seite mit border-top-left-radius
, border-top-right-radius
, border-bottom-right-radius
und border-bottom-left-radius
definieren.
Sie können den Radius jeder Ecke auch in der Kurzschreibweise angeben, die der Reihenfolge oben links, oben rechts, rechts unten und links unten folgt.
.my-element {
border-radius: 1em 2em 3em 4em;
}
Wenn Sie einen einzelnen Wert für eine Ecke definieren, verwenden Sie eine weitere Kurzschreibweise, da ein Rahmenradius in zwei Teile unterteilt ist: die vertikale und die horizontale Seite.
Wenn Sie also border-top-left-radius: 1em
festlegen, legen Sie den Radius für die obere linke Oberseite und die obere linke Linke fest.
Sie können beide Properties pro Ecke so definieren:
.my-element {
border-top-left-radius: 1em 2em;
}
Dadurch wird der Wert border-top-left-top
= 1em
und der Wert border-top-left-left
= 2em
hinzugefügt.
Dadurch wird der Radius des oberen linken Rahmens in einen elliptischen Radius umgewandelt, anstatt den standardmäßigen kreisförmigen Radius zu verwenden.
Sie können diese Werte im border-radius
-Kurzzeichen definieren. Verwenden Sie dazu nach den Standardwerten ein /
, um die elliptischen Werte zu definieren.
So können Sie kreativ werden und komplexe Formen erstellen.
.my-element {
border: 2px solid;
border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}
Rahmenbilder
Sie müssen in CSS nicht nur einen stroke-basierten Rahmen verwenden.
Sie können auch jeden beliebigen Bildtyp mit border-image
verwenden.
Mit dieser Kurzschreibweise können Sie das Quellbild, die Art und Weise, wie es in Scheiben geschnitten wird, die Bildbreite, den Abstand des Rahmens vom Rand und die Wiederholung festlegen.
.my-element {
border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
border-image-slice: 61 58 51 48;
border-image-width: 20px 20px 20px 20px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch stretch;
}
Die Eigenschaft border-image-width
ist mit border-width
vergleichbar: Mit ihr legen Sie die Breite des Rahmenbilds fest.
Mit der Eigenschaft border-image-outset
können Sie den Abstand zwischen dem Rahmenbild und dem Frame festlegen, um den es gewickelt wird.
border-image-source
Das border-image-source
(Quelle des Rahmenbilds) kann ein url
für ein beliebiges gültiges Bild sein, einschließlich CSS-Gradienten.
.my-element {
border-image-source: url('path/to/image.png');
}
.my-element {
border-image-source: linear-gradient(to bottom, #000, #fff);
}
border-image-slice
Mit der Property border-image-slice
können Sie ein Bild in 9 Teile mit 4 Teilungslinien aufteilen.
Er funktioniert ähnlich wie die Kurzschreibweise margin
, bei der Sie den Offset-Wert für oben, rechts, unten und links definieren.
.my-element {
border-image: url('image.jpg');
border-image-slice: 61 58 51 48;
}
Nachdem Sie die Offset-Werte definiert haben, haben Sie jetzt 9 Abschnitte des Bildes: 4 Ecken, 4 Kanten und einen Mittelabschnitt.
Die Ecken werden mit dem Rahmenbild auf die Ecken des Elements angewendet.
Die Ränder werden auf die Ränder dieses Elements angewendet.
Mit der Eigenschaft border-image-repeat
wird festgelegt, wie diese Kanten ihren Raum ausfüllen, und mit der Eigenschaft border-image-width
wird die Größe der Scheiben gesteuert.
Das Keyword fill
gibt an, ob der mittlere Abschnitt, der durch das Slicing übrig bleibt, als Hintergrundbild des Elements verwendet wird oder nicht.
border-image-repeat
Mit border-image-repeat
wird festgelegt, wie das Rahmenbild wiederholt werden soll.
Die Funktionsweise entspricht der von background-repeat
.
- Der Standardwert ist
stretch
. Das Quellbild wird so gestreckt, dass es nach Möglichkeit den verfügbaren Bereich ausfüllt. - Mit dem Wert
repeat
werden die Ränder des Quellbilds so oft wie möglich gekachtelt. Dabei werden die Randbereiche möglicherweise zugeschnitten. - Der Wert
round
entspricht dem Wert „repeat“. Anstatt die Bildränder zuzuschneiden, um so viele Bilder wie möglich zu zeigen, wird das Bild gestreckt und wiederholt, um eine nahtlose Wiederholung zu erzielen. - Der Wert
space
entspricht wieder dem Wert für „repeat“, fügt aber einen Abstand zwischen den einzelnen Randbereichen ein, um ein nahtloses Muster zu erstellen.
Wissen testen
Ihr Wissen über Rahmen testen
Welche ist die Standardrahmenfarbe?
white
black
historicColor
currentColor
.my-element { border: solid hotpink; }
Wie breit ist der Standardrand?
solid
1px
medium
border-inline: 1px solid
würde…