Rahmen

The CSS Podcast – 016: Borders

Im box-Modell-Modul ging es um eine Frame-Analogie, um jeden Abschnitt des Box-Modells zu beschreiben.

Das Rahmenrahmen ist der Frame Ihrer Boxen. Die border-Eigenschaften bieten Ihnen eine Vielzahl von Optionen, um diesen Frame in nahezu jedem Stil zu erstellen, den Sie sich vorstellen.

Rahmenlinieneigenschaften

Mit den einzelnen border-Eigenschaften können Sie die verschiedenen Teile eines Rahmens gestalten.

Stil

Damit ein Rahmen angezeigt wird, müssen Sie den border-style definieren. Es stehen mehrere Optionen zur Auswahl:

Bei Verwendung der Stile ridge, inset, outset und groove dunkelt der Browser die Rahmenfarbe für die zweite angezeigte Farbe ab, um Kontrast und Tiefe zu erzeugen. Dieses Verhalten kann je nach Browser variieren, insbesondere bei dunklen Farben wie black. In Chrome erscheinen diese Rahmenstile durchgängig und in Firefox werden sie aufgehellt, sodass eine dunklere zweite Farbe entsteht.

Da das Browserverhalten auch für andere Rahmenstile variiert, ist es wichtig, die Website in verschiedenen Browsern zu testen. Ein häufiges Beispiel für diesen Unterschied ist die Art und Weise, wie jeder Browser die Stile dotted und dashed rendert.

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.

Kurzschrift

Wie bei margin und padding können Sie mit dem Kurzattribut border alle Teile des Rahmens in einer Deklaration definieren.

.my-element {
    border: 1px solid red;
}

Die Reihenfolge der Werte in der Kurzschreibweise border ist border-width, border-style und dann border-color.

Farbe

Mit border-color kannst du die Farbe auf allen Seiten der Verpackung oder auf jeder einzelnen Seite festlegen. Standardmäßig wird die aktuelle Textfarbe des Feldes verwendet: currentColor. Wenn Sie also nur Rahmeneigenschaften wie die Breite angeben, entspricht die Farbe dem 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;
}

Mit border-top-color, border-right-color, border-left-color und border-bottom-color kannst du auf jeder Seite des Felds eine Rahmenfarbe festlegen.

Breite

Die Breite eines Rahmens gibt an, wie breit die Linie ist. Sie wird von border-width gesteuert. Die Standardrahmenbreite beträgt medium. Diese ist jedoch erst sichtbar, wenn Sie einen Stil definieren. Sie können auch andere benannte Breiten wie thin und thick verwenden.

Die border-width-Properties akzeptieren auch Längeneinheiten wie px, em, rem oder %. Mit border-top-width, border-right-width, border-left-width und border-bottom-width können Sie die Rahmenbreite auf jeder Seite des Felds festlegen.

Logische Attribute

Im Modul Logische Eigenschaften haben Sie erfahren, wie Sie auf Blockablauf und Inline-Ablauf verweisen können anstatt auf explizite obere, rechte, untere oder linke Seiten.

Diese Funktion ist auch mit Rahmen möglich:

.my-element {
    border: 2px dotted;
    border-inline-end: 2px solid red;
}

In diesem Beispiel sind für .my-element alle Seiten so definiert, dass sie einen gepunkteten 2px-Rahmen haben, der der aktuellen Textfarbe entspricht. Der Rahmen von inline-end wird dann als 2px, durchgängig und rot definiert. Bei rechtsläufigen Sprachen (z. B. Englisch) befindet sich der rote Rahmen auf der rechten Seite des Felds. Bei linksläufigen Sprachen wie Arabisch wird der rote Rahmen links am Feld angezeigt.

Die Browserunterstützung variiert für logische Eigenschaften in Rahmen. Prüfen Sie daher die Unterstützung, bevor Sie sie verwenden.

Rahmenradius

Für abgerundete Ecken wird die Eigenschaft border-radius verwendet.

.my-element {
    border-radius: 1em;
}

Durch diese Kurzschreibweise erhält jede Ecke des Felds einen einheitlichen Rahmen. Wie bei den anderen Eigenschaften für den Rahmen 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 in der Kurzschreibweise auch den Radius jeder Ecke angeben. Diese Reihenfolge gilt: oben links, oben rechts, unten rechts dann unten links.

.my-element {
    border-radius: 1em 2em 3em 4em;
}

Wenn Sie einen einzelnen Wert für eine Ecke definieren, verwenden Sie eine andere 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 oben links und oben links fest.

Sie können beide Eigenschaften pro Ecke so definieren:

.my-element {
    border-top-left-radius: 1em 2em;
}

Dadurch wird der border-top-left-top-Wert 1em und der border-top-left-left-Wert 2em hinzugefügt. Dadurch wird der Rahmenradius links oben in einen elliptischen Radius und nicht in den standardmäßigen Kreisradius umgewandelt.

Sie können diese Werte in der Abkürzung border-radius definieren. Dazu verwenden Sie /, um die elliptischen Werte nach den Standardwerten 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

In CSS müssen Sie nicht nur einen strichbasierten Rahmen verwenden. Mit border-image können Sie auch einen beliebigen Bildtyp verwenden. Mit dieser Kurzschreibeigenschaft können Sie das Quellbild festlegen, wie dieses Bild geschnitten wird, die Bildbreite, wie weit der Rahmen vom Rand entfernt ist und wie er sich wiederholen soll.

.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 wie border-width: Damit legen Sie die Breite Ihres Rahmenbilds fest. Mit der Eigenschaft border-image-outset können Sie den Abstand zwischen Ihrem Rahmenbild und dem Rahmen festlegen, den es umgibt.

border-image-source

Die border-image-source (Quelle des Rahmenbilds) kann ein url für jedes gültige Bild sein, das CSS-Farbverläufe enthält.

.my-element {
    border-image-source: url('path/to/image.png');
}

.my-element {
    border-image-source: linear-gradient(to bottom, #000, #fff);
}

border-image-slice

Die Eigenschaft border-image-slice ist eine nützliche Eigenschaft, mit der Sie ein Bild in neun Teile mit vier Teillinien aufteilen können. Sie funktioniert wie die Abkürzung margin, bei der Sie den Offset-Wert oben, rechts, unten und links definieren.

.my-element {
    border-image: url('image.jpg');
    border-image-slice: 61 58 51 48;
}

Mit den definierten Versatzwerten haben Sie jetzt 9 Abschnitte des Bilds: 4 Ecken, 4 Kanten und einen mittleren Abschnitt. Die Ecken werden auf die Ecken des Elements mit dem Rahmenbild angewendet. Die Kanten werden auf die Kanten des Elements angewendet. Die Eigenschaft border-image-repeat definiert, wie diese Kanten ihren Bereich ausfüllen, und die Eigenschaft border-image-width steuert die Größe der Segmente.

Schließlich bestimmt das Keyword fill, ob der mittlere Abschnitt, der von der Unterteilung übrig bleibt, als Hintergrundbild des Elements verwendet wird oder nicht.

border-image-repeat

Mit border-image-repeat weisen Sie CSS an, wie das Rahmenbild wiederholt werden soll. Sie funktioniert wie background-repeat.

• Der Ausgangswert ist stretch. Dadurch wird das Quell-Image so gestreckt, dass der verfügbare Platz nach Möglichkeit ausgefüllt wird.
• Der Wert repeat kachelt die Ränder des Quellbilds so oft wie möglich und kann die Randbereiche beschneiden, um dies zu erreichen.
• Der Wert round ist der gleiche wie „Repeat“. Statt jedoch die Bildränderbereiche so zu begrenzen, dass sie so viele wie möglich passen, wird das Bild gestreckt und wiederholt, um eine nahtlose Wiederholung zu erzielen.
• Der Wert space entspricht wieder der Wiederholung, aber dieser Wert erhöht den Abstand zwischen den einzelnen Randbereichen, um ein nahtloses Muster zu erstellen.

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über Grenzen

.my-element {
  border: solid hotpink;
}