Rahmen

The CSS Podcast – 016: Grenzen

Im Modul box model (Boxmodell) haben wir eine Frame-Analogie betrachtet, um jeden Abschnitt des Box-Modells zu beschreiben.

Der Rahmen ist der Rahmen und die border-Eigenschaften bieten Ihnen eine riesige Auswahl an Optionen, um diesen Frame in bei fast jedem erdenklichen Stil.

Rahmeneigenschaften

Die einzelnen border-Eigenschaften bieten die Möglichkeit, die verschiedenen Teile eines Rahmens zu gestalten.

Stil

Damit ein Rahmen erscheint, müssen Sie die border-style Es stehen mehrere Optionen zur Auswahl:

Wenn Sie die Stile ridge, inset, outset und groove verwenden, Der Browser dunkelt die Rahmenfarbe der zweiten angezeigten Farbe ab, um Kontrast und Tiefe zu schaffen. Dieses Verhalten kann je nach Browser variieren, insbesondere für dunkle Farben wie black. In Chrome werden diese Rahmenstile angezeigt. In Firefox werden diese aufgehellt und erhalten dann eine dunklere zweite Farbe.

Das Browserverhalten kann auch bei anderen Rahmenarten variieren, Daher ist es wichtig, Ihre Website in verschiedenen Browsern zu testen. Ein häufiges Beispiel für diesen Unterschied ist das Rendern der Stile dotted und dashed in den einzelnen Browsern.

</ph>

Um den Rahmenstil für jede Seite des Rechtecks festzulegen, können Sie border-top-style, border-right-style, border-left-style, und border-bottom-style.

Kurzschrift

Wie bei margin und padding gilt: können Sie den border Kurzschrift-Eigenschaft, um alle Teile des Rahmens in einer Deklaration zu definieren.

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

Die Werte in der Abkürzung border sind border-width, border-style und dann border-color.

Farbe

Sie können die Farbe auf allen Seiten der Verpackung festlegen oder mit border-color Standardmäßig wird die aktuelle Textfarbe des Feldes verwendet: currentColor. Wenn Sie nur Rahmeneigenschaften deklarieren, wie Breite, entspricht die Farbe dem berechneten Wert, es sei denn, Sie legen ihn explizit fest.

.my-element {
    color: blue;
    border: solid; /* Will be a blue border */
}

.my-element {
    color: blue;
    border: solid yellow;
}

Um eine Rahmenfarbe für jede Seite der Box festzulegen, nutzen border-top-color, border-right-color, border-left-color und border-bottom-color

Breite

Die Breite eines Rahmens ist die Stärke der Linie. Sie wird durch border-width Die Standardrahmenbreite ist medium. Dieser ist jedoch erst sichtbar, wenn Sie einen Stil definieren. Sie können andere benannte Breiten wie thin und thick verwenden.

Für die border-width-Eigenschaften kann auch eine Längeneinheit wie folgt verwendet werden: px, em, rem oder %. Um die Rahmenbreite auf jeder Seite der Box festzulegen, verwenden Sie border-top-width, border-right-width, border-left-width und border-bottom-width

Logische Attribute

Im Logische Eigenschaften, die Sie kennengelernt haben, um Block- und Inline-Ablauf zu benennen, statt expliziter Ober-, Rechts-, Unter- oder Linksseiten.

Diese Funktion steht Ihnen auch mit Rahmen zur Verfügung:

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

In diesem Beispiel sind bei .my-element alle Seiten so definiert, dass sie ein 2px enthalten. gepunkteten Rahmen für die aktuelle Textfarbe. Der Rahmen inline-end wird dann als 2px definiert, ausgefüllt und rot. Bei rechtsläufigen Sprachen wie Englisch befindet sich der rote Rahmen auf der rechten Seite des Felds. Bei linksläufigen Sprachen wie Arabisch befindet sich der rote Rahmen auf der linken Seite des Felds.

Die Browser unterstützen unterschiedliche logische Eigenschaften in Rahmen, Informieren Sie sich daher vorher über den Support.

Rahmenradius

Um eine Box mit abgerundeten Ecken zu versehen, verwenden Sie die Methode border-radius-Property.

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

Mit dieser Kurzschreibweise wird jeder Ecke Ihres Rechtecks ein einheitlicher Rahmen hinzugefügt. Wie bei den anderen Rahmeneigenschaften können Sie den Rahmenradius für jede Seite border-top-left-radius, border-top-right-radius, border-bottom-right-radius und border-bottom-left-radius

Sie können auch den Radius der einzelnen Ecken in der Kurzschreibweise angeben. in dieser Reihenfolge: oben links, oben rechts, unten rechts und dann links unten.

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

Wenn Sie einen einzelnen Wert für eine Ecke definieren, Sie verwenden eine andere Abkürzung, da ein Rahmenradius in zwei Teile aufgeteilt ist: vertikalen und horizontalen Seiten. Wenn Sie also border-top-left-radius: 1em festlegen, Sie legen den Radius oben links und links oben fest.

Sie können beide Eigenschaften pro Ecke wie folgt definieren:

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

Dadurch wird der border-top-left-top-Wert 1em hinzugefügt, und einen border-top-left-left-Wert von 2em. Damit wird der Rahmenradius oben links in einen elliptischen Radius umgewandelt. und nicht auf den Standardkreisradius.

Sie können diese Werte in der Abkürzung border-radius definieren. Verwenden Sie / zum Definieren der elliptischen Werte nach den Standardwerten. 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 strichbasierten Rahmen verwenden. Sie können auch eine beliebige Art von Bild verwenden, border-image Mit dieser Kurzschreibweise können Sie das Quell-Image, wie das Bild geschnitten wird, die Bildbreite, wie weit der Rand vom Rand entfernt ist und wie er wiederholt werden 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 border-image-width Property ist wie border-width: wie Sie die Breite des Rahmenbilds festlegen. Die 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, einschließlich CSS-Verläufe.

.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 border-image-slice -Eigenschaft ist eine nützliche Eigenschaft, mit der Sie ein Bild in neun Teile zerlegen können, die aus vier geteilten Linien bestehen. Es funktioniert wie die Abkürzung margin, mit der Sie die Offset-Werte oben, rechts, unten und links definieren.

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

Nachdem die Offset-Werte definiert sind, Sie haben 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 Ränder des Elements angewendet. Die border-image-repeat definiert, wie diese Kanten ihren Raum ausfüllen und border-image-width die Größe der Segmente.

Schließlich bestimmt das Schlüsselwort fill, ob der mittlere Abschnitt, der von der Segmentierung links zurückbleibt, als Hintergrundbild des Elements verwendet wird oder nicht.

border-image-repeat

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

• Der Ausgangswert ist stretch, Dabei wird das Quellbild so gestreckt, dass der verfügbare Platz nach Möglichkeit ausgefüllt wird.
• Der Wert repeat unterteilt die Ränder des Quellbilds so oft wie möglich. und gegebenenfalls die Randbereiche beschneiden.
• Der Wert round ist mit „Repeat“ identisch. Statt die Bildränder so zu beschneiden, dass sie in möglichst viele hineinpassen, Das Bild wird gestreckt und wiederholt, um eine nahtlose Wiederholung zu erzielen.
• Der Wert für space ist wieder dasselbe wie „Repeat“, Dieser Wert fügt jedoch den Abstand zwischen den einzelnen Randbereichen hinzu, um ein nahtloses Muster zu erzeugen.

Wissen testen

Testen Sie Ihr Wissen über Grenzen

.my-element {
  border: solid hotpink;
}