column-rule
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.
Die column-rule
Shorthand- CSS- Eigenschaft legt die Breite, den Stil und die Farbe der Linie fest, die zwischen Spalten in einem mehrspaltigen Layout gezeichnet wird.
Probieren Sie es aus
Zusammengesetzte Eigenschaften
Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:
Syntax
column-rule: dotted;
column-rule: solid 8px;
column-rule: solid blue;
column-rule: thick inset blue;
/* Global values */
column-rule: inherit;
column-rule: initial;
column-rule: revert;
column-rule: revert-layer;
column-rule: unset;
Werte
Die column-rule
-Eigenschaft wird als einer, zwei oder drei der unten aufgeführten Werte in beliebiger Reihenfolge angegeben.
<'column-rule-width'>
-
Ist ein
<length>
oder eines der drei Schlüsselwörter,thin
,medium
oderthick
. Sieheborder-width
für Details. <'column-rule-style'>
-
Siehe
border-style
für mögliche Werte und Details. <'column-rule-color'>
-
Ist ein
<color>
Wert.
Formale Definition
Initialer Wert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | mehrspaltige Elemente |
Vererbt | Nein |
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | wie die jeweiligen Kurzschreibweisen: |
Formale Syntax
column-rule =
<'column-rule-width'> ||
<'column-rule-style'> ||
<'column-rule-color'>
<column-rule-width> =
<line-width>
<column-rule-style> =
<line-style>
<column-rule-color> =
<color>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
Beispiele
Beispiel 1
/* Same as "medium dotted currentcolor" */
p.foo {
column-rule: dotted;
}
/* Same as "medium solid blue" */
p.bar {
column-rule: solid blue;
}
/* Same as "8px solid currentcolor" */
p.baz {
column-rule: solid 8px;
}
p.abc {
column-rule: thick inset blue;
}
Beispiel 2
HTML
<p class="content-box">
This is a bunch of text split into three columns. Take note of how the
`column-rule` property is used to adjust the style, width, and color of the
rule that appears between the columns.
</p>
CSS
.content-box {
padding: 0.3em;
background: #ff7;
column-count: 3;
column-rule: inset 2px #33f;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Multi-column Layout Module Level 1 # column-rule |
Browser-Kompatibilität
BCD tables only load in the browser