column-rule

von 1 Mitwirkenden:

Ü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 Die Verkettung der Initialwerte der Landform Eigenschaften:
    • column-rule-width: medium
    • column-rule-style: none
    • column-rule-color: currentColor
  • Anwendbar auf mehrspaltige Elemente
  • Vererbt Nein
  • Prozentwerte
  • Medium visuell
  • Berechneter Wert wie die einzelnen Werte der Kurzschreibweise:
    • column-rule-color: If the value ist translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).
    • column-rule-style: siehe Spezifikation
    • column-rule-width: an absolute length; 0 if the column rule style ist none oder hidden
  • Animierbar wie die jeweiligen Kurzschreibweisen:
    • column-rule-color: Ja, als Farbe
    • column-rule-style: Nein
    • column-rule-width: Ja, als Längenangabe
  • Kanonische Reihenfolge order of appearance in the formal grammar of the values

Syntax

Formale Syntax: <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>

Werte

Akzeptiert einen, zwei oder drei Werte in beliebiger Reihenfolge:

<column-rule-width>
Ist eine <length> oder eins der drei Schlüsselwörter thin, medium oder thick. Siehe border-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.
Anwärter Empfehlung  

Browser Kompatibilität

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Grundlegende Unterstützung (Ja)-webkit 3.5 (1.9.1)-moz 10 11.1 3.0 (522)-webkit
Merkmal Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Grundlegende Unterstützung ? (Ja) ? ? ?

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: Sebastianz
Zuletzt aktualisiert von: Sebastianz,