border-block
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.
Die border-block CSS Eigenschaft ist eine Kurzschreibweise, um die individuellen logischen Block-Grundeigenschaften der Ränder an einer einzigen Stelle im Stylesheet festzulegen.
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;
}
border-block kann verwendet werden, um die Werte für eine oder mehrere der Eigenschaften border-block-width, border-block-style, und border-block-color festzulegen, wobei sowohl der Anfang als auch das Ende in der Blockdimension auf einmal eingestellt werden. Die physischen Ränder, auf die es angewendet wird, hängen vom Schreibmodus, der Richtung und Textausrichtung des Elements ab. Es entspricht den Eigenschaften border-top und border-bottom oder border-right, und border-left, abhängig von den definierten Werten für writing-mode, direction, und text-orientation.
Die Ränder in der anderen Dimension können mit border-inline festgelegt werden, welches border-inline-start, und border-inline-end setzt.
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:
<'border-width'>-
Die Breite des Randes. Siehe
border-width. <'border-style'>-
Der Linienstil des Randes. Siehe
border-style. <color>-
Die Farbe des Randes.
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,∞]> |
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
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # propdef-border-block |
Browser-Kompatibilität
Loading…
Siehe auch
- CSS Logische Eigenschaften und Werte
- Diese Eigenschaft ordnet sich einer der physischen Rand-Eigenschaften zu:
border-top,border-right,border-bottom, oderborder-left. writing-mode,direction,text-orientation