-webkit-border-before CSS-Eigenschaft
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 Kurzform Eigenschaft setzt die einzelnen logischen Blockanfang-Rand-Eigenschaftswerte an einer einzigen Stelle im Stylesheet.
Bestandteileigenschaften
Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:
Syntax
/* 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 wird zu einem physischen Rand in Abhängigkeit vom Schreibrichtung, der Richtung und der Textorientierung des Elements zugeordnet. Sie entspricht der border-top, border-right, border-bottom, oder border-left Eigenschaft in Abhängigkeit von den definierten Werten für writing-mode, direction, und text-orientation.
Sie steht in 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
| Anfangswert | wie die jeweiligen Kurzschreibweisen:
|
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
| Animationstyp | wie die jeweiligen Kurzschreibweisen:
|
Formale Syntax
-webkit-border-before =
<'border-width'> ||
<'border-style'> ||
<color>
<border-width> =
<'border-top-width'>{1,4}
<border-style> =
<'border-top-style'>{1,4}
<border-top-width> =
<line-width>
<border-top-style> =
<line-style>
<line-width> =
<length [0,∞]> |
hairline |
thin |
medium |
thick
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
Beispiele
Anwenden eines Randes mit vertikalem Text
HTML
<div>
<p class="exampleText">Example text</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-rl;
-webkit-border-before: 5px dashed blue;
}
Ergebnis
Spezifikationen
Nicht Teil eines Standards, aber es steht im Zusammenhang mit der standardmäßigen border-block-start Eigenschaft.
Browser-Kompatibilität
Siehe auch
border-block-start- Die zugeordneten physischen Eigenschaften:
border-top,border-right,border-bottom, undborder-left writing-mode,direction,text-orientation