CSS свойство column-rule-style

❮ Назад Вперед ❯

Свойство column-rule-style определяет стиль линий между колонками. Функция свойства column-rule похожа на функцию границы, которую можно добавить, чтобы разделить соседние колонки . Так же, как и border, линии между колонками тоже могут иметь стиль.

Сначала необходимо установить свойство columns или columns-count, так как нужны колонки, чтобы определить их стиль.

Свойство column-rule-style может иметь следующие значения:

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

Могут быть добавлены некоторые свойства расширения, например, -webkit- для Safari, Google Chrome и Opera (новые версии), -moz- для Firefox, -o- для старых версий Opera и т. д.

Значение по умолчанию	none
Применяется	К многоколоночным элементам.
Наследуется	Нет
Анимируемое	Нет
Версия	CSS3
DOM синтаксис	object.style.columnRuleStyle = "dashed" ;

Синтаксис

column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 30px;
      -webkit-column-rule-style: dotted;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 30px;
      -moz-column-rule-style: dotted;
      column-count: 3;
      column-gap: 30px;
      column-rule-style: dotted;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства column-rule-style</h2>
    <div>
      Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
    </div>
  </body>
</html>

Попробуйте сами!

Пример со значением "double". Здесь также установлен цвет для линий при помощи свойства column-rule-color

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 30px;
      -webkit-column-rule-style: double;
      -webkit-column-rule-width: 5px;
      -webkit-column-rule-color: #1c87c9;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 30px;
      -moz-column-rule-style: double;
      -moz-column-rule-width: 5px;
      -moz-column-rule-color: #1c87c9;
      column-count: 3;
      column-gap: 30px;
      column-rule-style: double;
      column-rule-color: #1c87c9;
      column-rule-width: 5px;
      text-align: justify;
      }
    </style>
  </head>
  <body>
    <h1>Пример свойства column-rule-style</h1>
    <div>
      Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
    </div>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
none	Указывает на отсутствие линий. Значение по умолчанию.
hidden	Скрытая линия.
dotted	Точечная линия.
dashed	Пунктирная линия.
solid	Сплошная линия.
double	Двойная линия.
groove	3D рифленая линия. Эффект зависит от значений толщины и цвета.
ridge	3D рельефная линия. Эффект зависит от значений толщины и цвета.
inset	3D вдавленная линия. Эффект зависит от значений толщины и цвета.
outset	3D выпуклая линия. Эффект зависит от значений толщины и цвета.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.