-webkit-border-before

Nicht standardisiert: Diese Funktion ist nicht standardisiert und befindet sich nicht auf dem Weg zur Standardisierung. Verwenden Sie sie nicht auf Produktionsseiten, die dem Web ausgesetzt sind: Sie funktioniert nicht für alle Benutzer. Es kann auch große Inkompatibilitäten zwischen Implementierungen geben, und das Verhalten kann sich in Zukunft ändern.

Die -webkit-border-before CSS-Eigenschaft ist eine Kurzschreibweise, um die individuellen logischen Eigenschaften des Blockanfangsrahmens an einer einzigen Stelle im Stylesheet festzulegen.

Bestandteileigenschaften

Diese Eigenschaft ist eine Kurzschreibweise 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 wird einer physischen Rahmenkante entsprechend dem Schreibmodus, der Richtung und der Textorientierung des Elements zugeordnet. Sie entspricht der Eigenschaft 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 in Bezug zu -webkit-border-after, -webkit-border-start und -webkit-border-end, welche die anderen Rahmenkanten des Elements definieren.

Die standardisierte Entsprechung dieser Eigenschaft ist border-block-start.

Formale Definition

Anfangswert	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