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()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

где
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

где
<alpha-value> = <number> | <percentage>
<hue> = <number> | <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 Status Comment
CSS Multi-column Layout Module
Определение 'column-rule-color' в этой спецификации.
Рабочий черновик Первое определение.
Начальное значениеcurrentcolor
Применяется кмультиколоночные элементы
Наследуетсянет
Отображениевизуальный
Обработка значениявычисленный цвет
Animation typeцвет
Канонический порядокper grammar

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
column-rule-colorChrome Полная поддержка 50
Полная поддержка 50
Полная поддержка 1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12
Полная поддержка 12
Полная поддержка 12
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Полная поддержка 52
Полная поддержка 52
Нет поддержки 3.5 — 74
С префиксом
С префиксом Требует вендорный префикс: -moz-
IE Полная поддержка 10Opera Полная поддержка 11.1
Полная поддержка 11.1
Полная поддержка 15
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Safari Полная поддержка 9
Полная поддержка 9
Полная поддержка 3
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка 50
Полная поддержка 50
Полная поддержка ≤37
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 50
Полная поддержка 50
Полная поддержка 18
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Полная поддержка 52
Полная поддержка 52
Полная поддержка 4
С префиксом
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка 11.1
Полная поддержка 11.1
Полная поддержка 14
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Safari iOS Полная поддержка 9
Полная поддержка 9
Полная поддержка 1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android Полная поддержка 5.0
Полная поддержка 5.0
Полная поддержка 1.0
С префиксом
С префиксом Требует вендорный префикс: -webkit-

Легенда

Полная поддержка  
Полная поддержка
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

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