-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 zum Festlegen der individuellen logischen Block-Start-Grenzeigenschaften an einer einzigen Stelle im Stylesheet.
Bestandteileigenschaften
Diese Eigenschaft ist eine Kurzschreibweise 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 -webkit-border-before Eigenschaft wird je nach Schreibmodus, Richtung und Textorientierung des Elements einer physischen Grenze zugeordnet. Sie entspricht der border-top, border-right, border-bottom, oder border-left Eigenschaft, abhängig von den für writing-mode, direction, und text-orientation definierten Werten.
Sie steht in Zusammenhang mit -webkit-border-after, -webkit-border-start, und -webkit-border-end, welche die anderen Grenzen des Elements definieren.
Das standard-konforme Äquivalent dieser Eigenschaft ist border-block-start.
Formale Definition
| Anfangswert | wie die jeweiligen Kurzschreibweisen:
|
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Ja |
| Prozentwerte | wie die jeweiligen Kurzschreibweisen:
|
| Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
| Animationstyp | diskret |
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,∞]> |
thin |
medium |
thick
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
Beispiele
Anwenden einer Grenze bei 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
Kein Teil eines Standards, aber es steht im Zusammenhang mit der standard-konformen border-block-start Eigenschaft.
Browser-Kompatibilität
Loading…
Siehe auch
border-block-start- Die zugeordneten physischen Eigenschaften:
border-top,border-right,border-bottom, undborder-left writing-mode,direction,text-orientation