CSS border-inline-start-style Eigenschaft

定义和用法

border-inline-start-style 属性设置元素在行内方向起始处的边框样式。

CSS 的 border-inline-start-style 属性与 border-bottom-style、border-left-style、border-right-style und border-top-style 属性非常相似，但 border-inline-start-style 属性依赖于行内方向。

注意：相关的 CSS 属性 writing-mode、text-orientation und direction Definiert die Inline-Richtung. Dies beeinflusst den Anfang und das Ende einer Zeile sowie border-inline-start-style Ergebnis der Eigenschaft. Für englische Seiten ist die Inline-Richtung von links nach rechts, die Block-Richtung nach unten.

Beispiel

Beispiel 1

Stellen Sie das Styling für die Kante am Anfang der Inline-Richtung ein:

div {
  border-inline-start-style: dotted;
}

Versuchen Sie es selbst

Beispiel 2: Kombination mit der Eigenschaft writing-mode

Die Position der Kante am Anfang der Inline-Richtung wird beeinflusst von writing-mode Einfluss der Eigenschaft:

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

Versuchen Sie es selbst

Beispiel 3: Kombination mit der Eigenschaft direction

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

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

Versuchen Sie es selbst

CSS-Syntax

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

Eigenschaftswert

Wert Beschreibung
none Standardwert. Ohne Rahmen angeben.
hidden Wie none, aber unterschiedlich in der Konfliktlösung der Kanten des Tabellenelements.
dotted Punktiert Linien-Kanten definieren.
dashed Gestrichelte Kanten definieren.
solid Solide Kanten definieren.
double Doppellinien-Kanten definieren.
groove

3D-eingewölbte Kanten definieren.

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

3D-hervorstehende Kanten definieren.

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

3D-eingebettete Kanten definieren.

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

3D-ausstehende Kanten definieren.

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

Technische Details

Standardwert: none
Vererbung: Nein
Animationserstellung: Nicht unterstützt. Siehe:Animationseigenschaften.
Version: CSS3
JavaScript-Syntax: object.style.borderInlineStartStyle="dotted"

Browser-Unterstützung

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

Chrome Edge Firefox Safari Opera
69.0 79.0 41.0 12.1 56.0

Verwandte Seiten

Anleitung:CSS Rand

Referenz:CSS border Eigenschaft

Referenz:CSS border-inline Eigenschaft

Referenz:CSS border-inline-end-style Eigenschaft

Referenz:CSS border-inline-start-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