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 Значение элемента наследуется от родительского элемента.

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

50.0
-webkit-
12.0
-webkit-
52.0
+ 3.5 -moz-
3.0
-webkit-
11.1
+ 15.0 -webkit-


Считаете ли это полезным?

Похожие статьи