-webkit-border-before

Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.

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

Zusätzliche Eigenschaften

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

Einer 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 Umrandung zugeordnet, abhängig vom Schreibrichtung, Richtung und Textausrichtung des Elements. Sie entspricht der border-top, border-right, border-bottom, oder border-left Eigenschaft, je nach den definierten Werten für writing-mode, direction, und text-orientation.

Sie bezieht sich auf -webkit-border-after, -webkit-border-start, und -webkit-border-end, die die anderen Ränder des Elements definieren.

Das Standard-Track-Äquivalent 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>           

<border-width> = 
  <line-width>{1,4}  

<border-style> = 
  <line-style>{1,4}  

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

Beispiele

Anwenden einer Umrandung 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