CSS border-start-end-kante Eigenschaft

Definition und Verwendung

border-start-end-radius Die Eigenschaft wird verwendet, um den Radius des Rundungswinkels zwischen dem Anfang der Element-Block-Richtung (block-start) und dem Ende der Inline-Richtung (inline-end) zu definieren.

Hinweis:zugehörigen CSS-Eigenschaften writing-mode,text-orientation und direction Definiert die Block-Richtung und die Inline-Richtung. Dies ist der Grund, warum diese Eigenschaften auch die border-start-end-radius Das Ergebnis der Eigenschaft. Für englische Seiten ist die Inline-Richtung von links nach rechts, die Block-Richtung nach unten.

Wenn border-start-end-radius Wenn eine Eigenschaft zwei Werte hat, wird der Rundungswinkel ein Ellipse sein:

border-start-end-radius: 50px 100px;

Wenn border-start-end-radius Wenn eine Eigenschaft einen Wert hat, wird der Rundungswinkel ein Kreis sein:

border-start-end-radius: 50px;

CSS border-start-end-radius Eigenschaft und border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius und border-top-right-radius Ähnlich, aber border-start-end-radius Die Eigenschaft hängt von der Blockrichtung und der Inline-Richtung ab.

Beispiel

Beispiel 1

Fügen Sie Ecken am Anfang der Blockrichtung und am Ende der Inline-Richtung für bestimmte Elemente hinzu:

#example1 {
  background-color: lightblue;
  border-start-end-radius: 50px;
}
#example2 {
  background-color: lightblue;
  border-start-end-radius: 50px 20px;
}
#example3 {
  background-color: lightblue;
  border-start-end-radius: 50%;
direction: rtl;
}
#example4 {
  background-color: lightblue;
  border-start-end-radius: 50%;
  writing-mode: vertical-rl;
}

Versuchen Sie es selbst

Beispiel 2: Kombination mit der Eigenschaft direction

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

#example1 {
  border: 2px solid red;
  direction: rtl;
  border-start-end-radius: 25px;
}

Versuchen Sie es selbst

Beispiel 3: Kombination mit der Eigenschaft writing-mode

Die Position der Ecken am Anfang der Blockrichtung und am Ende der Inline-Richtung wird beeinflusst von writing-mode Einfluss der Eigenschaft:

#example2 {
  border: 2px solid red;
  writing-mode: vertical-rl;
  border-start-end-radius: 25px;
}

Versuchen Sie es selbst

CSS-Syntax

border-start-end-radius: 0|length|initial|inherit;

Eigenschaftswert

Technische Details

Browser-Unterstützung

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

Verwandte Seiten

Lehrvideo:CSS Ecken

Referenz:CSS border-bottom-left-radius Eigenschaft

Referenz:CSS border-bottom-right-radius Eigenschaft

Referenz:CSS border-oben-links-kante Eigenschaft

Referenz:CSS border-oben-rechts-kante Eigenschaft

Referenz:CSS direction Eigenschaft

Referenz:CSS text-orientation Eigenschaft

Referenz:CSS writing-mode Eigenschaft