CSS-Eigenschaft -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 CSS-Kurzform-Eigenschaft -webkit-border-before legt die einzelnen logischen Rahmen-Eigenschaftswerte für den Blockanfang an einer einzigen Stelle im Stylesheet fest.
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
Diese Eigenschaft wird als durch Leerzeichen getrennte Liste aus einem bis drei der folgenden Werte angegeben:
<'border-width'>-
Siehe
border-width <'border-style'>-
Siehe
border-style <'color'>-
Siehe
color
Beschreibung
Die Eigenschaft -webkit-border-before wird abhängig vom Schreibmodus, der Schreibrichtung und der Textausrichtung des Elements einem physischen Rahmen zugeordnet. Sie entspricht je nach den für writing-mode, direction und text-orientation definierten Werten der Eigenschaft border-top, border-right, border-bottom oder border-left.
Sie steht in Beziehung zu -webkit-border-after, -webkit-border-start und -webkit-border-end, die die anderen Rahmen des Elements definieren.
Das standardisierte Äquivalent 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 Rahmens 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, steht jedoch in Beziehung zur standardisierten Eigenschaft border-block-start.
Browser-Kompatibilität
Siehe auch
border-block-start- Die zugeordneten physischen Eigenschaften:
border-top,border-right,border-bottomundborder-left writing-mode,direction,text-orientation