-webkit-border-before

Kein Standard: Diese Funktion ist nicht standardisiert und befindet sich nicht im Standardisierungsprozess. Verwenden Sie sie nicht auf Produktionsseiten, die auf das Web ausgerichtet sind: Sie wird nicht für alle Benutzer funktionieren. Außerdem kann es große Inkompatibilitäten zwischen Implementierungen geben und das Verhalten kann sich in Zukunft ändern.

Die -webkit-border-before CSS Eigenschaft ist eine Kurzform, um die individuellen logischen Anfangswerte der Blockrahmeneigenschaften an einer einzigen Stelle im Stylesheet festzulegen.

Bestandteile

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

-webkit-border-before-color
-webkit-border-before-style
-webkit-border-before-width

Syntax

css

/* Border values */
-webkit-border-before: 1px;
-webkit-border-before: 2px dotted;
-webkit-border-before: medium dashed blue;

/* Global values */
-webkit-border-before: inherit;
-webkit-border-before: initial;
-webkit-border-before: revert;
-webkit-border-before: revert-layer;
-webkit-border-before: unset;

Werte

Eines oder mehrere der folgenden, in beliebiger Reihenfolge:

<'border-width'>: Siehe border-width
<'border-style'>: Siehe border-style
<'color'>: Siehe color

Beschreibung

Die -webkit-border-before Eigenschaft ordnet sich je nach Schreibmodus, Richtung und Textausrichtung des Elements an einer physischen Rahmenposition an. Sie entspricht den Eigenschaften border-top, border-right, border-bottom oder border-left, abhängig von den definierten Werten für writing-mode, direction und text-orientation.

Sie steht im Zusammenhang mit -webkit-border-after, -webkit-border-start, und -webkit-border-end, die die anderen Ränder des Elements definieren.

Das standardmäßige Gegenstück dieser Eigenschaft ist border-block-start.

Formale Definition

Initialer Wert	wie die jeweiligen Kurzschreibweisen: `border-width`: wie die jeweiligen Kurzschreibweisen: `border-top-width`: `medium` `border-right-width`: `medium` `border-bottom-width`: `medium` `border-left-width`: `medium` `border-style`: wie die jeweiligen Kurzschreibweisen: `border-top-style`: `none` `border-right-style`: `none` `border-bottom-style`: `none` `border-left-style`: `none` `color`: `canvastext`
Anwendbar auf	alle Elemente
Vererbt	Ja
Prozentwerte	wie die jeweiligen Kurzschreibweisen: `-webkit-border-before-width`: logische Breite des beinhaltenden Blocks
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `border-width`: wie die jeweiligen Kurzschreibweisen: `border-bottom-width`: die absolute Länge; `0` falls `border-bottom-style` `none` oder `hidden` ist `border-left-width`: die absolute Länge; `0` falls `border-left-style` `none` oder `hidden` ist `border-right-width`: die absolute Länge; `0` falls `border-right-style` `none` oder `hidden` ist `border-top-width`: die absolute Länge; `0` falls `border-top-style` `none` oder `hidden` ist `border-style`: wie die jeweiligen Kurzschreibweisen: `border-bottom-style`: wie angegeben `border-left-style`: wie angegeben `border-right-style`: wie angegeben `border-top-style`: wie angegeben `color`: berechnete Farbe
Animationstyp	diskret

Formale Syntax

-webkit-border-before =
  <'border-width'> || <'border-style'> || <color>

Beispiele

Anwenden eines Rahmens mit vertikalem Text

HTML

html

<div>
  <p class="exampleText">Example text</p>
</div>

CSS

css

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  -webkit-border-before: 5px dashed blue;
}

border-block-start
Die zugeordneten physischen Eigenschaften: border-top, border-right, border-bottom, und border-left
writing-mode, direction, text-orientation