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

Сокращённое свойство column-rule определяет стиль, ширину и цвет разделителя между колонками. Обратите внимание, что он отображается только в том случае, если для элемента заданы column-count или columns. Он задаётся следующими свойствами:

Если свойство column-rule-color не задано, по умолчанию используется currentColor. Как и другие сокращённые свойства, если значение не указано, оно устанавливается в значение по умолчанию.

Свойство column-rule является одним из свойств CSS3.

Начальное значение	medium (ширина), none (стиль), currentColor (цвет)
Применяется к	Блочные контейнеры, создающие многостолбцовую верстку. Также применяется к `::first-letter`.
Наследуется	Нет.
Анимация	Да. Цвет и ширина column-rule анимируются.
Версия	CSS3
Синтаксис DOM	object.style.columnRule = "5px outset #ccc";

Синтаксис

Синтаксис свойства CSS column-rule

css

column-rule: column-rule-width column-rule-style column-rule-color | initial | inherit;

Примечание: Порядок значений ширины, стиля и цвета в сокращённом свойстве может быть любым.

Пример свойства column-rule:

Пример со значениями ширины, стиля и цвета

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 3;
        column-gap: 30px;
        column-rule: 5px dotted #ccc;
      }
    </style>
  </head>
  <body>
    <h1>Column-rule example</h1>
    <p>Here the column-rule is set to 5px dotted gray.</p>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Try it Yourself »

Результат

CSS column-rule Property

Если указано одно значение, оно интерпретируется как column-rule-style.

Пример свойства column-rule с одним значением:

Пример с одним значением

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 3;
        column-gap: 30px;
        column-rule: dashed;
      }
    </style>
  </head>
  <body>
    <h2>Column-rule example</h2>
    <p>Here the column-rule is set to only "dashed".</p>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Try it Yourself »

Пример свойства column-rule с заданными шириной, стилем и цветом:

Пример с указанием всех значений

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 4;
        column-gap: 30px;
        column-rule: 10px groove #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Column-rule example</h2>
    <p>Here the column-rule is set to 10px groove gray.</p>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Try it Yourself »

Значения

Значение	Описание
column-rule-width	Определяет ширину разделителя между колонками. Значение по умолчанию — "medium".
column-rule-style	Определяет стиль разделителя между колонками. Значение по умолчанию — "none".
column-rule-color	Устанавливает цвет разделителя. Значение по умолчанию — текущий цвет элемента.
initial	Устанавливает свойству значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Практика

Что делает свойство 'column-rule' в CSS?

Оно задаёт ширину, стиль и цвет разделителя между колонкамиОно добавляет пространство между колонкамиОно определяет количество колонокОно задаёт отступы вокруг колонокОно определяет макет колонок

Свойство CSS column-rule ​

Синтаксис ​

Пример свойства column-rule: ​

Пример со значениями ширины, стиля и цвета ​

Результат ​

Пример свойства column-rule с одним значением: ​

Пример с одним значением ​

Пример свойства column-rule с заданными шириной, стилем и цветом: ​

Пример с указанием всех значений ​

Значения ​

Практика ​

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

Синтаксис

Пример свойства column-rule:

Пример со значениями ширины, стиля и цвета

Результат

Пример свойства column-rule с одним значением:

Пример с одним значением

Пример свойства column-rule с заданными шириной, стилем и цветом:

Пример с указанием всех значений

Значения

Практика