CSS border-inline-style Eigenschaft

Definition und Verwendung

border-inline-style Die Eigenschaft setzt den Kantenstil des Elements in der Richtung von links nach rechts fest.

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

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

border-inline-style: solid dotted;
  • Der Kantenstil am Anfang der inline-Richtung ist durchgestrichen (solid).
  • Der Kantenstil am Ende der inline-Richtung ist gepunktet (dotted).

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

border-inline-style: dotted;
  • Die Kantenstile am Anfang und am Ende der inline-Richtung sind gepunktet (dotted).

CSS border-inline-style Die Eigenschaft entspricht border-bottom-style、border-left-style、border-right-style und border-top-style Die Eigenschaften sind sehr ähnlich, aber border-inline-style Die Eigenschaft hängt von der Richtung von links nach rechts ab.

Hinweis:zugehörige CSS-Eigenschaften writing-mode、text-orientation und direction Definiert die Richtung von links nach rechts. Dies beeinflusst den Anfang und das Ende der Zeile sowie border-inline-style Das Ergebnis der Eigenschaft. Für englische Seiten ist die Richtung von links nach rechts, die Blockrichtung nach unten.

Beispiel

Beispiel 1

Rahmensstil auf der inline-Direktion setzen:

#example1 {
  border-inline-style: solid;
}
#example2 {
  border-inline-style: dashed dotted;
}

Versuchen Sie es selbst

Beispiel 2: Kombination mit dem writing-mode-Attribut

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

div {
  writing-mode: vertical-rl;
  border-inline-style: dotted;
}

Versuchen Sie es selbst

Beispiel 3: Kombination mit dem direction-Attribut

Die Position der Kanten am Anfang und Ende der inline-Direktion wird beeinflusst von direction Eigenschaftswirkung:

div {
  direction: rtl;
  border-inline-style: solid dotted;
}

Versuchen Sie es selbst

CSS-Syntax

border-inline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Eigenschaftswert

Wert Beschreibung
none Standardwert. Ohne Rahmen spezifizieren.
hidden Wie none, aber unterschiedlich in der Konfliktlösung der Tabellelemente.
dotted Gepunktete Kante spezifizieren.
dashed Gestrichelte Kante spezifizieren.
solid Solide Kante spezifizieren.
double Doppellinien-Kante spezifizieren.
groove

3D innen konkave Kante spezifizieren.

Der Effekt hängt vom Wert von border-color ab.
ridge

3D außen konvexe Kante spezifizieren.

Der Effekt hängt vom Wert von border-color ab.
inset

3D innen konkave Kante spezifizieren.

Der Effekt hängt vom Wert von border-color ab.
outset

3D außen konkave Kante spezifizieren.

Der Effekt hängt vom Wert von border-color ab.
initial Diese Eigenschaft auf ihren Standardwert setzen. Siehe: initial.
inherit Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe: inherit.

Technische Details

Standardwert: none
Vererbbarkeit: Nein
Animationsproduktion: Nicht unterstützt. Siehe:Animationsbezogene Eigenschaften.
Version: CSS3
JavaScript-Syntax: object.style.borderInlineStyle="dotted"

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
87.0 87.0 66.0 14.1 73.0

Verwandte Seiten

Anleitung:CSS Rand

Referenz:CSS border Eigenschaft

Referenz:CSS border-inline Eigenschaft

Referenz:CSS border-inline-style Eigenschaft

Referenz:CSS border-bottom-style Eigenschaft

Referenz:CSS border-left-style Eigenschaft

Referenz:CSS border-right-style Eigenschaft

Referenz:CSS border-top-style Eigenschaft

Referenz:CSS direction Eigenschaft

Referenz:CSS text-orientation Eigenschaft

Referenz:CSS writing-mode Eigenschaft