column-rule-color

CSS свойство column-rule-color устанавливает цвет линии, расположенной между колонками при мультиколоночной вёрстке.

Синтаксис

/* Значения <color>  */
column-rule-color: red;
column-rule-color: rgb(192, 56, 78);
column-rule-color: transparent;
column-rule-color: hsla(0, 100%, 50%, 0.6);

/* Глобальные значения */
column-rule-color: inherit;
column-rule-color: initial;
column-rule-color: unset;

Свойство column-rule-color указывает одиночное значение <color>.

Значения

<color>: Цвет линий, разделяющих столбцы.

Формальный синтаксис

<color>где 
<color> = <rgb()> | (en-US) <rgba()> | (en-US) <hsl()> | (en-US) <hsla()> | (en-US) <hwb()> | (en-US) <hex-color> | (en-US) <named-color> | (en-US) currentcolor | (en-US) <deprecated-system-color>
где 
<rgb()> = rgb( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgb( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<rgba()> = rgba( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgba( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<hsl()> = hsl( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsl( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<hsla()> = hsla( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsla( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<hwb()> = hwb( [ (en-US)<hue> | (en-US) none] (en-US) [ (en-US)<percentage> | (en-US) none] (en-US) [ (en-US)<percentage> | (en-US) none] (en-US) [ (en-US) / [ (en-US)<alpha-value> | (en-US) none] (en-US) ] (en-US)? (en-US) )
где 
<alpha-value> = <number> | (en-US) <percentage>
<hue> = <number> | (en-US) <angle>

Пример

HTML

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

CSS

p {
  column-count: 3;
  column-rule-style: solid;
  column-rule-color: blue;
}

Результат

Спецификации

Specification
CSS Multi-column Layout Module Level 2 (CSS Multicol 2) # crc

Начальное значение	`currentcolor`
Применяется к	мультиколоночные элементы
Наследуется	нет
Обработка значения	вычисленный цвет
Animation type	цвет

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

The <color> data type
Other color-related properties: color (en-US), background-color, border-color (en-US), outline-color (en-US), text-decoration-color (en-US), text-emphasis-color (en-US), text-shadow, and caret-color (en-US)
Applying color to HTML elements using CSS