Übersicht
In mehrspaltigen Layouts beschreibt die column-rule
CSS Eigenschaft eine gerade Linie, welche zwischen jeder Spalte dargestellt wird. Sie ist eine komfortable Kurzform, um das separate Setzen der einzelnen column-rule-*
Eigenschaften zu vermeiden: column-rule-width
, column-rule-style
und column-rule-color
.
Initialwert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | mehrspaltige Elemente |
Vererbt | Nein |
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | wie die jeweiligen Kurzschreibweisen: |
Syntax
Werte
Akzeptiert einen, zwei oder drei Werte in beliebiger Reihenfolge:
<column-rule-width>
- Ist eine
<length>
oder eins der drei Schlüsselwörterthin
,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.
Beispiele
p.foo { column-rule: dotted; } /* entspricht "medium dotted currentColor" */ p.bar { column-rule: solid blue; } /* entspricht "medium solid blue" */ p.baz { column-rule: solid 8px; } /* entspricht "8px solid currentColor" */ p.abc { column-rule: thick inset blue; }
Live Beispiel
padding:0.3em; background:gold; border:groove 2px gold; column-rule: inset 2px gold; column-width:17em;
Spezifikation
Spezifikation | Status | Kommentar |
---|---|---|
CSS Multi-column Layout Module Die Definition von 'column-rule' in dieser Spezifikation. |
Arbeitsentwurf |
Browser Kompatibilität
BCD tables only load in the browser