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

Свойство column-rule-style CSS определяет стиль линий, проводимых между колонками в многоколоночных макетах сетки, flex и multi-col.

Попробуйте

column-rule-style: dotted;

column-rule-style: dashed, dotted;

column-rule-style: repeat(2, inset, outset), double;

column-rule-style: double, repeat(auto, dashed, solid), double;

column-rule-style: hidden;

<section id="default-example">
  <p id="example-element">
    London. Noel term lately over, and the Lord George sitting in Lincoln's Inn
    Hall. Great 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 weird to meet
    an platypus, two feet long or so, waddling like an lizard up Morgan Hill.
  </p>
</section>

#example-element {
  columns: 6;
  column-rule-width: thick;
  column-rule-color: teal;
  gap: 7px;
}

Синтаксис

/* Keyword values */
column-rule-style: none;
column-rule-style: hidden;
column-rule-style: dotted;
column-rule-style: dashed;
column-rule-style: solid;
column-rule-style: double;
column-rule-style: groove;
column-rule-style: ridge;
column-rule-style: inset;
column-rule-style: outset;

/* Multiple values */
column-rule-style: groove, double, dashed;
column-rule-style: solid, repeat(5, ridge), solid;
column-rule-style: dotted, repeat(auto, inset, outset), dotted;

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

Значения

Свойство column-rule-style принимает список значений, разделённых запятыми, включая:

<line-style>

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

<repeat-line-style>

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

<auto-repeat-line-style>

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

Описание

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

Значение представляет собой список компонентов, разделённых запятыми; он может включать типы <line-style>, <repeat-line-style> и <auto-repeat-line-style>.

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

Если значение свойства содержит только одно <line-style>, все разделители колонок будут иметь этот стиль. Если объявить следующее, все разделители колонок будут double:

column-rule-style: double;

Если объявлено несколько значений <line-style>, они применяются к разделителям колонок в указанном порядке. Если разделителей колонок больше, чем значений <line-style>, список стилей линий повторяется, пока для каждого разделителя колонок не будет задан стиль. Например, если объявить следующее, каждый нечётный разделитель будет double, а каждый чётный — groove.

column-rule-style: double, groove;

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

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

column-rule-style: solid, outset, inset, outset, inset;
column-rule-style: solid, repeat(2, outset, inset);

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

Если промежутков больше, чем стилей, список стилей повторяется. Если контейнер содержит 6, 11, 16 или 21 колонку, эта последовательность стилей повторится соответственно один, два, три или четыре раза; последний разделитель будет inset.

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

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

column-rule-style: solid, repeat(auto, dotted), solid;

В этом случае не имеет значения, содержит ли контейнер 3, 6, 11, 16 или 21 колонку: первый и последний разделители колонок всегда будут solid, а все остальные разделители колонок будут dotted. Если колонок всего 2 или 3, пунктирных разделителей колонок не будет.

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

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

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

column-rule-style = 
  <line-style>

<line-style> = 
  none |
  hidden |
  dotted |
  dashed |
  solid |
  double |
  groove |
  ridge |
  inset |
  outset

Примеры

Основы использования

HTML

<p>
  This is a bunch of text split into three columns. The `column-rule-style`
  property is used to change the style of the line that is drawn between
  columns. Don't you think that's wonderful?
</p>

CSS

p {
  column-count: 3;
  column-rule-style: dashed;
}

Результат

Несколько значений

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, которому присваиваем значение row. Также мы добавляем flex-flow. Мы задаём gap равным 5px, чтобы обеспечить достаточное расстояние между колонками для 3px двойного бирюзового разделителя:

ul {
  display: flex;
  flex-flow: row;
  gap: 5px;
  column-rule-width: 3px;
  column-rule-color: teal;

  column-rule-style:
    dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden;
}

Результат

Поскольку значений (10) больше, чем промежутков (8), значения none и hidden не используются.

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

В этом примере показано, как значения повторяются, если их в списке стилей меньше, чем разделителей колонок.

Используя те же HTML и CSS, что и в предыдущем примере, мы задаём три стиля, разделённых запятыми, в качестве значения column-rule-style:

ul {
  column-rule-style: solid, groove, double;
}

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

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

ul {
  column-rule-style: solid, repeat(3, inset, outset), solid;
}

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

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

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

С помощью repeat(auto, <line-style>) мы задаём всем разделителям колонок значение groove, кроме первого и последнего, которым задаём значение solid.

ul {
  column-rule-style: solid, repeat(auto, groove), solid;
}

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

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

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

См. также

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