CSS border-inline-breite Eigenschaft

Definition und Verwendung

border-inline-width Die Eigenschaft setzt die Rahmenbreite des Elements in der Inline-Richtung fest.

Hinweis:Um border-inline-width Die Eigenschaft muss gesetzt werden, um in Kraft zu treten: border-inline-style.

border-inline-width Der Wert der Eigenschaft kann auf verschiedene Weise eingestellt werden:

Wenn border-inline-width Die Eigenschaft hat zwei Werte:

border-inline-width: 10px 50px;

• Die Breite des Rahmens am Anfang der Inline-Position beträgt 10px
• Die Breite des Rahmens am Ende der Inline-Position beträgt 50px

Wenn border-inline-width Die Eigenschaft hat einen Wert:

border-inline-width: 10px;

• Die Breite der Rahmen am Anfang und Ende der Inline-Position beträgt 10px

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

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

Beispiel

Beispiel 1

Breite der Kante in der Inline-Richtung einstellen:

#example1 {
  border-inline-style: solid;
  border-inline-width: 10px;
}
#example2 {
  border-inline-style: dashed;
  border-inline-width: thin thick;
}

Probieren Sie es selbst aus

Beispiel 2: Kombination mit der writing-mode-Eigenschaft

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

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

Probieren Sie es selbst aus

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-width: 5px 15px;
}

Probieren Sie es selbst aus

CSS-Syntax

border-inline-width: medium|thin|thick|length|initial|inherit;

Eigenschaftswert

Technische Details

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionsnummer des ersten Browsers dar, der diese Eigenschaft vollständig unterstützt.

Verwandte Seiten

Tutorials:CSS Rand

Referenz:CSS border Eigenschaft

Referenz:CSS border-inline Eigenschaft

Referenz:CSS border-inline-stil Eigenschaft

Referenz:CSS border-bottom-width Eigenschaft

Referenz:CSS border-links-breite Eigenschaft

Referenz:CSS border-rechts-breite Eigenschaft

Referenz:CSS border-oben-breite Eigenschaft

Referenz:CSS direction Eigenschaft

Referenz:CSS text-orientation Eigenschaft

Referenz:CSS writing-mode Eigenschaft