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

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

Попробуйте

rule-color: purple;

rule-color: rgb(48 125 222), rgb(222 48 125);

rule-color: rgb(48 125 222), repeat(3, rgb(222 48 125));

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

<section id="default-example">
  <div id="example-element">
    <i>A</i>
    <i>B</i>
    <i>C</i>
    <i>D</i>
    <i>E</i>
    <i>F</i>
    <i>G</i>
    <i>H</i>
    <i>I</i>
    <i>J</i>
    <i>K</i>
    <i>L</i>
    <i>M</i>
    <i>N</i>
    <i>O</i>
    <i>P</i>
    <i>Q</i>
    <i>R</i>
    <i>S</i>
    <i>T</i>
    <i>U</i>
    <i>V</i>
    <i>W</i>
    <i>X</i>
    <i>Y</i>
    <i>Z</i>
  </div>
</section>

#example-element {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  rule: solid thick;
}
#example-element i {
  padding: 5px;
}

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

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

• column-rule-color
• row-rule-color

Синтаксис

/* Single <color> value */
rule-color: purple;
rule-color: rgb(192 56 78);
rule-color: transparent;
rule-color: hsl(0 100% 50% / 60%);

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

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

Значения

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

<line-color>

color, задающий цвет линии.

<repeat-line-color>

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

<auto-repeat-line-color>

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

Описание

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

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

Цвета линий

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

rule-color: blue;

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

rule-color: red, yellow;

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

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

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

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

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

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

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

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

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

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

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

Примеры

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

В этом примере мы задаём одно значение <color> для линий, проведённых между столбцами и строками элементов в сеточном контейнере.

HTML

Мы создаём список из 75 элементов. Большая часть HTML-кода скрыта для краткости.

<ul>
  <li>1</li>
  <li>2</li>
  ...
  <li>74</li>
  <li>75</li>
</ul>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>
  <li>32</li>
  <li>33</li>
  <li>34</li>
  <li>35</li>
  <li>36</li>
  <li>37</li>
  <li>38</li>
  <li>39</li>
  <li>40</li>
  <li>41</li>
  <li>42</li>
  <li>43</li>
  <li>44</li>
  <li>45</li>
  <li>46</li>
  <li>47</li>
  <li>48</li>
  <li>49</li>
  <li>50</li>
  <li>51</li>
  <li>52</li>
  <li>53</li>
  <li>54</li>
  <li>55</li>
  <li>56</li>
  <li>57</li>
  <li>58</li>
  <li>59</li>
  <li>60</li>
  <li>61</li>
  <li>62</li>
  <li>63</li>
  <li>64</li>
  <li>65</li>
  <li>66</li>
  <li>67</li>
  <li>68</li>
  <li>69</li>
  <li>70</li>
  <li>71</li>
  <li>72</li>
  <li>73</li>
  <li>74</li>
  <li>75</li>
</ul>

CSS

Мы задаём неупорядоченному списку сеточный контейнер из 10 столбцов, создавая столбцы и строки с помощью свойства grid-template-columns. Мы задаём gap величиной 5px, чтобы между столбцами и строками было достаточно места для пунктирного разделителя 3px, и задаём для list-style-type значение none, чтобы убрать маркеры списка.

Мы задаём gap величиной 5px, чтобы между элементами было достаточно места для пунктирного разделителя средней толщины. Мы задаём для rule-color значение #22BB22 — зелёное значение <hex-color>:

ul {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  list-style-type: none;
  gap: 5px;
  rule-style: dashed;
  rule-width: medium;

  rule-color: #22bb22;
}
li {
  text-align: center;
  aspect-ratio: 1;
}

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

      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }
  }
}

Результат

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

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

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

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

      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }
  }
}

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

Результат

Между столбцами есть девять промежутков, а между строками — шесть, но в нашем списке цветов всего три цвета, поэтому список повторяется: первая, четвёртая и седьмая линии будут синими.

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

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

CSS

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

Мы также добавили рамку вокруг каждого элемента сетки, чтобы было видно, как линия-разделитель проходит посередине промежутка между столбцами и строками.

ul {
  --base: yellow;
  --mixin: blue;

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

Результат

Сетка содержит 10 столбцов и 7 строк, образуя 9 промежутков между столбцами и 6 между строками. Функция repeat() трижды повторяет два содержащихся в ней смешанных цвета, создавая список из восьми цветов. Для создания четырёх цветов требуется довольно много CSS-кода, но, по крайней мере, нам не пришлось прописывать все восемь функций color-mix(). Поскольку промежутков между столбцами больше, чем цветов в списке, цвета для промежутков между столбцами повторяются. Промежутков между строками меньше, чем цветов, поэтому два последних цвета в списке для них не используются.

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

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

Мы используем те же HTML и CSS, что и в предыдущих примерах, но переопределяем значение rule-color. Здесь мы используем repeat(auto, <color>), чтобы сделать все линии почти прозрачными чёрными (#00000033), кроме первой и последней, которые задаём сплошным цветом black.

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

Результат

Несмотря на то что линий-разделителей столбцов больше, чем линий-разделителей строк, значение <auto-repeat-line-color> позволяет создать этот симметричный эффект.

@layer no-support {
  @supports not (rule-color: repeat(3, red)) {
    body::before {
      content: "Your browser doesn't support `repeat()` functions within a rule-color property value";
      background-color: wheat;
      text-align: center;
      padding: 1rem 0;

      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }
  }
}

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

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

См. также

• Тип данных color
• rule-width
• rule-style
• row-rule-color
• column-rule-color
• Свойство короткой записи rule
• Модуль CSS gaps