border-block CSS-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2021 browserübergreifend verfügbar.
Die border-block CSS Kurzschreibweise legt die einzelnen logischen Block-Rand-Eigenschaftswerte an einer einzigen Stelle im Stylesheet fest.
Probieren Sie es aus
border-block: solid;
writing-mode: horizontal-tb;
border-block: dashed red;
writing-mode: vertical-rl;
border-block: 1rem solid;
writing-mode: horizontal-tb;
direction: rtl;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with a border around it.
</div>
</section>
#example-element {
background-color: #eeeeee;
color: darkmagenta;
padding: 0.75em;
width: 80%;
height: 100px;
unicode-bidi: bidi-override;
}
Zusammengesetzte Eigenschaften
Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:
Syntax
border-block: 1px;
border-block: 2px dotted;
border-block: medium dashed blue;
/* Global values */
border-block: inherit;
border-block: initial;
border-block: revert;
border-block: revert-layer;
border-block: unset;
Werte
Das border-block wird mit einem oder mehreren der folgenden Werte, in beliebiger Reihenfolge, angegeben:
<line-width>-
Die Breite des Rands. Siehe
border-width. <line-style>-
Der Linienstil des Rands. Siehe
border-style. <color>-
Die Farbe des Rands.
Beschreibung
border-block kann verwendet werden, um die Werte für eine oder mehrere der border-block-width, border-block-style und border-block-color festzulegen, wobei sowohl der Anfang als auch das Ende in der Blockdimension auf einmal festgelegt werden. Die physischen Ränder, denen es zugeordnet wird, hängen vom Schreibmodus, der Richtung und der Textorientierung des Elements ab. Sie entsprechen den Eigenschaften border-top und border-bottom oder border-right und border-left, abhängig von den für writing-mode, direction und text-orientation definierten Werten.
Die Ränder in der anderen Dimension können mit border-inline festgelegt werden, welche border-inline-start und border-inline-end setzt.
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
border-block =
<'border-block-start'>
<border-block-start> =
<line-width> ||
<line-style> ||
<color>
<line-width> =
<length [0,∞]> |
hairline |
thin |
medium |
thick
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
Beispiele
Rand 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;
border-block: 5px dashed blue;
}
Ergebnisse
Spezifikationen
| Spezifikation |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-border-block |
Browser-Kompatibilität
Siehe auch
- CSS Logische Eigenschaften und Werte
- Diese Eigenschaft wird auf eine der physischen Rand-Eigenschaften abgebildet:
border-top,border-right,border-bottom, oderborder-left. writing-mode,direction,text-orientation