Опубликовано: 18.08.2010 Последняя правка: 08.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

column-rule-color

Свойство CSS column-rule-color используется для указания цвета линий между колонками (столбцами) многоколоночного элемента.

Вместо column-rule-color можно применить универсальное свойство column-rule.

Тип свойства

Назначение: форматирование.

Применяется: к незамещаемым элементам уровня блока (кроме <TABLE> и элементов с display: table). К ячейкам таблиц — <TD>, <TH> и элементам с display: table-cell. А также к встроенным блокам — display: inline-block.

Наследуется: нет.

Значения

Значением свойства column-rule-color является указание цвета линий одним из следующих способов.

  • Имя цвета — Многие цвета имеют имена, которые браузеры понимают, например: red, green, blue.
  • HEX-код цвета — Шестнадцатеричное значение цвета, перед которым ставится знак решетка (#). Каждый HEX-код состоит из трех пар: первая пара отвечает за красный цвет, вторая — за зеленый, третья — за синий, например: #CC9966 или #996699.
  • Цвет в формате RGB — Цвет в десятичном формате, он начинается с аббревиатуры RGB, после которой в скобках, через запятую, указываются три значения. Здесь тоже первое число отвечает за красный цвет, второе — за зеленый, третье — за синий, например: RGB(153, 204, 51).
  • transparent — прозрачный цвет, поэтому сквозь него просвечивает фон родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: совпадает с цветом текста элемента (свойство color).

Синтаксис

column-rule-color: цвет | transparent

Пример CSS: использование column-rule-color

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство column-rule-color</title>
  <style type="text/css">
   p {
    column-count: 2; /* количество колонок */
    column-rule: 2px solid; /* толщина и стиль линий между колонками */
    column-rule-color: #f00; /* цвет линий между колонками */
   }
  </style>
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet consectetuer metus Curabitur justo tellus ornare.
     Nam elit Fusce elit Vivamus metus Sed sit aliquet nibh ligula. Ipsum Quisque
     malesuada nulla ac ac feugiat at nunc Curabitur wisi. Maecenas elit Vestibulum
     enim ante commodo justo cursus Quisque condimentum quam. Eu vel enim nunc Aenean
     condimentum pharetra ligula vitae libero eu. Ante consectetuer nunc et turpis
     Praesent ridiculus Maecenas Curabitur Phasellus habitasse. Consequat rutrum Donec
     turpis habitant sem dui et eget a Sed. Mattis est et condimentum.</p>
 </body>
</html>

Результат примера

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетНетНетДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и вышеДо 11.111.1 и выше3.1 и выше
Поддержка:НетНетНетНетДаНет
CSS по алфавиту
CSS по назначению