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

column-rule — это CSS-сокращённое свойство, задающее ширину, стиль и цвет линий, которые проводятся между столбцами в многоколоночных макетах сетки, flex и multicol.

Попробуйте

column-rule: solid;

column-rule: groove 0.8em teal;

column-rule:
  dotted thick teal,
  repeat(3, dashed pink 1px, outset olive 5px);

column-rule:
  dotted thick teal,
  repeat(auto, dashed pink 1px, dashed pink 5px),
  dotted thick teal;

column-rule:
  dashed medium olive,
  repeat(auto, dotted pink 1px),
  inset orange 5px;

<section id="default-example">
  <p id="example-element">
    London. Lady Catnip sitting in Lincoln's Inn Hall. Nice May weather. As much
    mud in the streets as if the waters had but newly retired from the face of
    the earth, and it would not be great to meet a Fred, two feet long or so,
    waddling like an iguana up Holborn Hill.
  </p>
</section>

#example-element {
  columns: 7;
}

Составные свойства

Это свойство является сокращённой записью следующих свойств CSS:

• column-rule-color
• column-rule-style
• column-rule-width

Синтаксис

/* One value */
column-rule: dashed;
column-rule: inset 8px;
column-rule: solid teal;
column-rule: thick outset rgb(18 122 67);

/* Multiple values */
column-rule: groove, dashed, solid;
column-rule:
  dotted medium teal,
  dashed pink 0.5em,
  outset olive 1px;
column-rule:
  solid #0ff,
  repeat(3, dashed pink 1px, outset olive 5px);
column-rule:
  inset 3px yellow,
  repeat(auto, dashed pink 1px, groove olive 5px);

/* Global values */
column-rule: inherit;
column-rule: initial;
column-rule: revert;
column-rule: revert-layer;
column-rule: unset;

Значения

Это свойство задаётся списком значений, разделённых запятыми. Каждое значение может относиться к одному из следующих типов:

<gap-rule>

Задаётся одним, двумя или тремя значениями из перечисленных ниже, в любом порядке.

<'line-width'>

<line-width>: одним из ключевых слов thin, medium или thick либо положительным значением <length>, задающим ширину линии. Значение по умолчанию — medium.

<'line-style'>

<line-style>: одно из значений none, hidden, dotted, dashed, solid, double, groove, ridge, inset или outset. Значение по умолчанию — none. См. column-rule-style.

<'color'>

Значение color, задающее цвет линии. Значение по умолчанию — currentcolor. См. column-rule-color.

<gap-repeat-rule>

Функция repeat(), первым аргументом которой является <integer> со значением не меньше 1, а последующими аргументами — одно или несколько значений <gap-rule>. Значение <integer> задаёт количество повторений списка значений <gap-rule>.

<gap-auto-repeat-rule>

Функция repeat(), первым аргументом которой является auto, а последующими аргументами — одно или несколько значений <gap-rule>. Переданный список значений <gap-rule> повторяется столько раз, сколько необходимо, чтобы заполнить значения для всех правил между колонками, не заданные явно другими компонентами значения свойства.

Описание

Свойство column-rule задаёт стиль линий, которые проводятся в промежутках между колонками в многоколоночных контейнерах multicol, flex и grid, содержащих более одной колонки.

Свойство column-rule является сокращённой записью свойств column-rule-color, column-rule-style и column-rule-width. Свойство column-rule вместе с сокращённым свойством row-rule также можно задать с помощью сокращённого свойства rule.

Значение свойства представляет собой список компонентов, разделённых запятыми; в него могут входить значения типов <gap-rule>, <gap-repeat-rule> и <gap-auto-repeat-rule>. Каждый <gap-rule> задаёт ширину, цвет и стиль одной или нескольких линий.

Если значение свойства состоит только из одного <gap-rule>, все линии между колонками будут иметь этот стиль. Если объявить следующее, все линии между колонками будут dashed maroon 3px:

column-rule: dashed maroon 3px;

Если объявлено несколько значений <gap-rule>, они применяются к линиям между колонками в указанном порядке. Если промежутков между колонками больше, чем значений <gap-rule>, список значений повторяется, пока для каждой линии между колонками не будет задан стиль. Например, если объявить следующее, каждая нечётная линия будет dashed maroon 3px, а каждая чётная — dotted navy 5px.

column-rule:
  dashed maroon 3px,
  dotted navy 5px;

Повторяющиеся стили линий

Функция repeat(), первым аргументом которой является целое число не меньше 1, позволяет повторить указанное число раз допустимый список значений CSS-типа <gap-rule>, переданных в качестве последующих аргументов. Это позволяет повторить один и тот же <gap-rule> заданное количество раз, не дублируя многократно один и тот же CSS-код. Следующие объявления эквивалентны:

column-rule:
  solid maroon 5px,
  outset navy 10px,
  inset olive 1px,
  outset navy 10px,
  inset olive 1px,
  outset navy 10px,
  inset olive 1px;
column-rule:
  solid maroon 5px,
  repeat(3, outset navy 10px, inset olive 1px);

В результате создаётся список из семи правил. Если количество стилей в списке стилей значения column-rule превышает количество промежутков между колонками, лишние значения стилей игнорируются. Если контейнер, к которому применяется это свойство, содержит три колонки, правило в первом промежутке будет solid maroon 5px, а во втором — outset navy 10px.

Если промежутков больше, чем стилей, список стилей повторяется. Если контейнер содержит 8, 15, 22 или 29 колонок, эта последовательность стилей повторится один, два, три или четыре раза соответственно, а последняя линия будет inset olive 1px.

Автоматически повторяющиеся стили линий

Функция repeat() также принимает auto в качестве первого аргумента вместо положительного целого числа. Если первым аргументом является auto, значения <gap-rule>, переданные в качестве последующих аргументов, повторяются столько раз, сколько необходимо, чтобы заполнить значения для правил, не заданные явно другими компонентами значения свойства.

column-rule:
  solid maroon 5px,
  repeat(auto, dotted olive 1px, dashed navy 1px),
  solid maroon 5px;

В этом случае первая и последняя линии между колонками будут solid maroon 5px, а все остальные будут чередоваться между dotted olive 1px и dashed navy 1px. Неважно, содержит контейнер 3, 6, 11, 16 или 21 колонку: между первой и последней линиями всегда будет нарисована толстая сплошная бордовая линия (если только свойство column-rule-visibility-items не приведёт к тому, что линия не будет нарисована), а все остальные линии между колонками будут тонкими пунктирными оливковыми или штриховыми тёмно-синими. Если колонок всего 2 или 3, пунктирных или штриховых линий не будет.

Ключевое слово auto внутри функции repeat() создаёт автоматический повторитель, который заполняет значения для линий между колонками, которые иначе не получили бы значения из других частей списка, предотвращая циклическое повторение списка. В значении column-rule может присутствовать не более одного repeat(auto, <gap-rule>).

Формальное определение

Формальный синтаксис

column-rule = 
  <'column-rule-width'> ||
  <'column-rule-style'> ||
  <'column-rule-color'>

Примеры

Базовый пример

В этом примере мы задаём одну линию, которая проводится между flex-элементами.

HTML

Добавим список авторов:

<ul>
  <li>Kimberlé Crenshaw</li>
  <li>Angela Y. Davis</li>
  <li>Bernardine Evaristo</li>
  <li>Audre Lorde</li>
  <li>Cathy Park Hong</li>
  <li>Zoya Patel</li>
  <li>Juno Mac</li>
  <li>Molly Smith</li>
  <li>Tara Westover</li>
</ul>

CSS

Зададим списку тип flex-контейнера, создав колонки с помощью свойства flex-direction, которому сокращённое свойство flex-flow задаёт значение row. Также зададим gap значение 12px, чтобы между колонками было достаточно места для линии 10px groove maroon:

ul {
  display: flex;
  flex-flow: row;
  gap: 12px;
  list-style-type: none;

  column-rule: 10px groove maroon;
}

Результат

Повторяющиеся значения

В этом примере показано, как значения повторяются, если в списке стилей меньше значений, чем линий между колонками. Также показаны значения по умолчанию для ширины, цвета и стиля свойств medium, currentcolor и none соответственно.

Используя те же HTML и CSS, что и в предыдущем примере, зададим в качестве значения column-rule четыре значения <gap-rule>, разделённых запятыми: в первом <gap-rule> опустим ширину, во втором — цвет, а в третьем — стиль; четвёртое будет содержать все три компонента:

ul {
  column-rule:
    maroon dashed,
    1px dotted,
    5px teal,
    10px orange solid;
}

Бордовая линия имеет ширину 3px. Пунктирная линия того же цвета, что и текст. Бирюзовых линий нет, поскольку значение <gap-rule> третьего <line-style> по умолчанию равно none, поэтому линия не рисуется. Промежутков больше, чем значений <gap-rule>, поэтому список значений повторяется.

Использование функции repeat()

В этом примере показано использование функции repeat() в значении свойства column-rule. Мы используем те же HTML и CSS, что и в предыдущих примерах. Добавим функцию repeat() и зададим повторение списка из двух значений <gap-rule> четыре раза.

ul {
  column-rule:
    10px maroon dashed,
    repeat(4, dotted olive 3px, dashed teal 3px),
    10px maroon dashed;
}

Flex-контейнер содержит девять колонок, то есть восемь промежутков. Функция repeat() повторяет два значения стиля четыре раза, создавая список из десяти значений <gap-rule>. Поскольку промежутков между колонками меньше, чем всего значений <gap-rule>, последние два значения списка отбрасываются.

Использование auto внутри repeat()

В этом примере показано использование аргумента auto вместо целого числа в функции repeat().

С помощью repeat(auto, <gap-rule>) зададим для всех линий между колонками значение 1px dotted и цвет по умолчанию — текущий цвет, кроме первой и последней линий, для которых зададим 10px groove maroon.

ul {
  column-rule:
    10px groove maroon,
    repeat(auto, 3px dotted maroon),
    10px groove maroon;
}

@layer no-support {
  @supports not (column-rule: thin, thick) {
    body::before {
      content: "Your browser doesn't support multiple values for the column-rule property";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

Спецификации

Совместимость с браузерами

См. также

• column-rule-color
• column-rule-width
• column-rule-style
• row-rule сокращённое свойство
• rule сокращённое свойство
• Промежутки CSS модуль