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 -webkit-border-before CSS Eigenschaft ist eine Kurzschreibweise, um die individuellen logischen Eigenschaften des Blockanfangsrandes an einer einzigen Stelle im Stylesheet festzulegen.
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
Eines oder mehrere der folgenden, in beliebiger Reihenfolge:
<'border-width'>-
Siehe
border-width <'border-style'>-
Siehe
border-style <'color'>-
Siehe
color
Beschreibung
Die Eigenschaft -webkit-border-before bezieht sich auf einen physischen Rahmen, abhängig vom Schreibmodus, der Ausrichtung und Textorientierung des Elements. 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 Verbindung mit -webkit-border-after, -webkit-border-start, und -webkit-border-end, die die anderen Rahmen des Elements definieren.
Das Standard-Pendant zu 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, aber sie steht in Bezug zur Standard-Eigenschaft border-block-start.
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