CSS-свойство `row-rule-color`

Свойство row-rule-color CSS определяет цвета линий, нарисованных между рядами в многорядных макетах grid, flex и multicol.

Попробуйте

row-rule-color: magenta;

row-rule-color: magenta, goldenrod;

row-rule-color: repeat(2, magenta), goldenrod;

row-rule-color: goldenrod, repeat(auto, magenta), goldenrod;

row-rule-color: currentColor;

<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-style: solid;
  row-rule-width: 5px;
  gap: 5px;
  text-align: left;
}

Синтаксис

/* Single value */
row-rule-color: red;
row-rule-color: rgb(192 56 78);
row-rule-color: transparent;
row-rule-color: hsl(0 100% 50% / 60%);
row-rule-color: var(--primaryColor);

/* Multiple values */
row-rule-color: red, transparent;
row-rule-color: repeat(3, red), repeat(3, transparent);
row-rule-color: repeat(3, red), repeat(3, yellow, blue);
row-rule-color: red, repeat(auto, transparent), red;
row-rule-color: red, repeat(auto, blue, yellow), red;
row-rule-color: repeat(3, red), repeat(auto, transparent), repeat(3, red);

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

Значения

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

<line-color>

Значение color, представляющее цвет линии.

<repeat-line-color>

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

<auto-repeat-line-color>

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

Описание

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

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

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

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

row-rule-color: blue;

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

row-rule-color: blue, yellow;

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

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

row-rule-color: blue, yellow, red, yellow, red;
row-rule-color: blue, repeat(2, yellow, red);

Можно использовать любое допустимое значение цвета из любого цветового пространства, включая цветовые функции CSS, пользовательские свойства и т. д. Использование repeat() может упростить запись значений, особенно если они становятся более сложными. Это позволяет записать повторяющийся шаблон с помощью одной функции независимо от количества рядов.

Если задать --base: yellow и --mixin: blue, следующий пример даст результат, аналогичный предыдущему объявлению:

row-rule-color:
  color-mix(in lch decreasing hue, var(--base) 0%, var(--mixin)),
  repeat(
    2,
    color-mix(in lch decreasing hue, var(--base) 100%, var(--mixin)),
    color-mix(in lch decreasing hue, var(--base) 58%, var(--mixin))
  );

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

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

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

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

row-rule-color: blue, repeat(auto, yellow), red;

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

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

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

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

Примеры

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

В этом примере мы задаём один цвет для линий, нарисованных между 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-direction значение column с помощью сокращённого свойства flex-flow. Зададим gap размером 5px, чтобы между рядами было достаточно места для нашего пунктирного правила 3px:

ul {
  display: flex;
  flex-flow: column;
  gap: 5px;
  row-rule-style: dashed;
  row-rule-width: 3px;
  row-rule-color: blue;
}

Результат

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

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

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

ul {
  row-rule-color: blue, yellow, red;
}

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

В этом примере показано использование функции repeat() в значении свойства row-rule-color, а также то, как эта функция помогает избежать громоздких сложных значений.

Используем те же HTML и CSS, что и в предыдущих примерах. Чтобы показать, как значения могут усложняться, и продемонстрировать полезность функции repeat(), объявим два пользовательских свойства и используем их в трёх объявлениях цветовой функции color-mix(), чтобы создать те же синий, красный и жёлтый цвета, что и в предыдущем примере. Второе объявление находится внутри функции repeat(), заданной для повторения 3 раза.

ul {
  --base: yellow;
  --mixin: blue;
  row-rule-color:
    color-mix(in lch decreasing hue, var(--base) 0%, var(--mixin)),
    repeat(3, color-mix(in lch decreasing hue, var(--base) 100%, var(--mixin))),
    color-mix(in lch decreasing hue, var(--base) 58%, var(--mixin));
}

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

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

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

Используя repeat(auto, <color>), зададим для всех линий почти прозрачный чёрный цвет (#00000033), кроме первой и последней: для них зададим сплошной цвет black.

ul {
  row-rule-color: black, repeat(auto, #00000033), black;
}

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

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

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

См. также

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