-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 einzelnen logischen Eigenschaften des Blockanfangsrandes 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

Einer oder mehrere der folgenden Werte, in beliebiger Reihenfolge:

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

Beschreibung

Die -webkit-border-before-Eigenschaft bezieht sich auf eine physische Grenze, abhängig vom Schreibmodus, der Richtung und der 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 steht im Zusammenhang mit -webkit-border-after, -webkit-border-start, und -webkit-border-end, die die anderen Ränder des Elements definieren.

Das standardkonforme Gegenstück 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 eines Rahmens bei 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 physikalischen Eigenschaften: border-top, border-right, border-bottom, und border-left
writing-mode, direction, text-orientation