CSS Border-Inline-End-Breite Eigenschaft

Definition und Verwendung

border-inline-end-width Die Breite der Rahmenbreite des Attributenelements am Ende der Zeilenrichtung.

Hinweis:um border-inline-end-width Die Eigenschaft tritt in Kraft, wenn border-inline-end-style Eigenschaften.

CSS border-inline-end-width Eigenschaften entsprechen den CSS-Eigenschaften border-bottom-width,border-left-width,border-right-width und border-top-width Sehr ähnlich, aber border-inline-end-width Die Eigenschaft hängt von der Inline-Richtung ab.

Hinweis:zusammenhängende CSS-Eigenschaften writing-mode,text-orientation und direction Definiert die Inline-Richtung. Dies beeinflusst den Anfang und das Ende einer Zeile sowie border-inline-end-width Das Ergebnis der Eigenschaft. Für englische Seiten ist die Inline-Richtung von links nach rechts, die Block-Richtung ist nach unten.

Beispiel

Beispiel 1

Setzen Sie die Breite der Kante am Ende der Inline-Richtung fest:

div {
  border-inline-end-style: solid;
  border-inline-end-width: 10px;
}

Versuchen Sie es selbst

Beispiel 2: Kombination mit der writing-mode-Eigenschaft

Die Position der Kanten am Ende der Inline-Richtung wird beeinflusst von writing-mode Eigenschaftswirkung:

div {
  border-inline-end-style: solid;
  writing-mode: vertical-rl;
  border-inline-end-width: 5px;
}

Versuchen Sie es selbst

Beispiel 3: Kombination mit der direction-Eigenschaft

Die Position der Kanten am Anfang und am Ende der Inline-Richtung wird beeinflusst von direction Eigenschaftswirkung:

div {
  direction: rtl;
  border-inline-end-width: 10px;
}

Versuchen Sie es selbst

CSS-Syntax

border-inline-end-width: medium|dünn|dicke|length|initial|inherit;

Eigenschaftswert

Wert Beschreibung
medium Bestimmt eine mittlere Kante. Standardwert.
dünn Bestimmt eine dünne Kante.
dicke Bestimmt eine dicke Kante.
length Ermöglicht die Definition der Dicke der Kante. Siehe:CSS-Unit.
initial Setzt diese Eigenschaft auf ihren Standardwert. Siehe initial.
inherit Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe inherit.

Technische Details

Standardwert: medium
Vererbbarkeit: Nein
Animationserstellung: Unterstützt. Siehe:Animationsspezifische Eigenschaften.
Version: CSS3
JavaScript-Syntax: object.style.borderInlineEndWidth="10px"

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionsnummer der ersten Browser dar, die diese Eigenschaft vollständig unterstützen.

Chrome Edge Firefox Safari Opera
69.0 79.0 41.0 12.1 56.0

Verwandte Seiten

Anleitung:CSS Rahmen

Referenz:CSS Border Eigenschaft

Referenz:CSS Border-Inline Eigenschaft

Referenz:CSS Border-Inline-End-Stil Eigenschaft

Referenz:CSS border-inline-start-width Eigenschaft

Referenz:CSS Border-Bottom-Breite Eigenschaft

Referenz:CSS border-left-width Eigenschaft

Referenz:CSS border-right-width Eigenschaft

Referenz:CSS border-top-width Eigenschaft

Referenz:CSS Richtung Eigenschaft

Referenz:CSS text-orientation Eigenschaft

Referenz:CSS writing-mode Eigenschaft