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-Eigenschaft von CSS ist eine Shorthand-Eigenschaft zum Setzen der einzelnen logischen Blockrand-Eigenschaften an einer einzigen Stelle im Stylesheet.
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 zu setzen, und die Start- und Endwerte in der Blockdimension gleichzeitig zu definieren. Die physischen Ränder, auf die sie abgebildet werden, hängen von der Schreibrichtung, der Richtung und der Textausrichtung des Elements ab. Sie entspricht 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, welches border-inline-start und border-inline-end setzt, festgelegt werden.
Bestandteileigenschaften
Diese Eigenschaft ist eine Kurzform 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
border-block wird mit einem oder mehreren der folgenden in beliebiger Reihenfolge angegeben:
<'border-width'>-
Die Breite des Rahmens. Siehe
border-width. <'border-style'>-
Der Linienstil des Rahmens. Siehe
border-style. <color>-
Die Farbe des Rahmens.
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
Rahmen 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
Siehe auch
- CSS Logische Eigenschaften und Werte
- Diese Eigenschaft wird einer der physischen Rand-Eigenschaften zugeordnet:
border-top,border-right,border-bottom, oderborder-left. writing-mode,direction,text-orientation