column-rule-style

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-style CSS Eigenschaft legt den Stil der Linie fest, die zwischen Spalten in einem mehrspaltigen Layout gezogen wird.

Probieren Sie es aus

Syntax

css
/* <'border-style'> values */
column-rule-style: none;
column-rule-style: hidden;
column-rule-style: dotted;
column-rule-style: dashed;
column-rule-style: solid;
column-rule-style: double;
column-rule-style: groove;
column-rule-style: ridge;
column-rule-style: inset;
column-rule-style: outset;

/* Global values */
column-rule-style: inherit;
column-rule-style: initial;
column-rule-style: revert;
column-rule-style: revert-layer;
column-rule-style: unset;

Die Eigenschaft column-rule-style wird als einzelner <'border-style'>-Wert angegeben.

Werte

<'border-style'>

Ist ein Schlüsselwort, das von border-style definiert wird und den Stil der Linie beschreibt. Die Gestaltung muss wie im Modell der kollabierenden Ränder interpretiert werden.

Formale Definition

Initialer Wertnone
Anwendbar aufmehrspaltige Elemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

column-rule-style = 
  <line-style>  

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

Beispiele

Eine gestrichelte Spaltenlinie festlegen

HTML

html
<p>
  This is a bunch of text split into three columns. The `column-rule-style`
  property is used to change the style of the line that is drawn between
  columns. Don't you think that's wonderful?
</p>

CSS

css
p {
  column-count: 3;
  column-rule-style: dashed;
}

Ergebnis

Spezifikationen

Specification
CSS Multi-column Layout Module Level 1
# crs

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch