Свойство CSS `row-rule-style`

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

Попробуйте

row-rule-style: solid;

row-rule-style: inset, outset;

row-rule-style: repeat(2, dashed, dotted), solid;

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

row-rule-style: hidden;

<section id="default-example">
  <ul id="example-element">
    <li>One fish</li>
    <li>Two fish</li>
    <li>Red fish</li>
    <li>Blue fish</li>
  </ul>
</section>

#example-element {
  display: flex;
  flex-flow: column;
  row-rule-width: thick;
  row-rule-color: magenta;
  gap: 7px;
  text-align: left;
}

Синтаксис

/* One value */
row-rule-style: none;
row-rule-style: hidden;
row-rule-style: dotted;

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

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

Значения

Свойство row-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> повторяются столько раз, сколько необходимо, чтобы задать значения для всех правил строк, которые не указаны явно другими компонентами значения свойства.

Описание

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

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

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

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

row-rule-style: dashed;

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

row-rule-style: dashed, dotted;

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

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

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

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

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

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

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

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

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

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

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

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

Примеры

Простой пример

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

HTML

Мы добавляем список известных спортивных дуэтов:

<ul>
  <li>Simone Biles + Jonathan Owens</li>
  <li>Serena Williams + Venus Williams</li>
  <li>Aaron Judge + Giancarlo Stanton</li>
  <li>LeBron James + Dwyane Wade</li>
  <li>Xavi Hernandez + Andres Iniesta</li>
  <li>Kerri Walsh + Misty May Treanor</li>
</ul>

CSS

Мы задаём списку контейнер flex, формируя строки с помощью сокращённого свойства flex-flow, устанавливая flex-direction в column. Мы задаём gap размером 5px, чтобы между строками было достаточно места для нашего 3px красного пунктирного правила:

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

  row-rule-style: dashed;
}

Результат

Повторение значений

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

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

ul {
  row-rule-style: solid, dotted, dashed;
}

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

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

ul {
  row-rule-style: double, repeat(3, inset, dashed), double;
}

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

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

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

Используя repeat(auto, <line-style>), мы задаём для всех правил строк стиль dotted, кроме первого и последнего, для которых задаём solid.

ul {
  row-rule-style: solid, repeat(auto, dotted), solid;
}

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

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

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

См. также

• row-rule-color
• row-rule-width
• column-rule-style
• Сокращённое свойство row-rule
• Сокращённое свойство rule-style
• Сокращённое свойство rule
• Модуль CSS gaps