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

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

Попробуйте

rule: solid;

rule: dotted medium blue;

rule:
  dotted medium blue,
  repeat(3, dotted red 2px, double orange 5px);

rule:
  dashed medium magenta,
  repeat(auto, dotted blue 2px, dotted blue 5px),
  dashed medium magenta;

rule:
  dashed medium magenta,
  repeat(auto, dotted blue 2px),
  outset goldenrod 5px;

<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-свойств:

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

Синтаксис

/* One value */
rule: dotted;
rule: solid 8px;
rule: solid blue;
rule: thick inset blue;

/* Multiple values */
rule: groove, dashed, solid;
rule:
  dotted medium blue,
  dashed magenta 1px,
  outset green 5px;
rule:
  solid #0ff,
  repeat(3, dashed magenta 1px, outset green 5px);
rule:
  inset 3px yellow,
  repeat(auto, dashed magenta 1px, groove green 5px),
  inset 3px yellow;

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

Значения

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

<gap-rule>

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

<'line-width'>

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

<'line-style'>

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

<'color'>

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

<gap-repeat-rule>

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

<gap-auto-repeat-rule>

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

Описание

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

Свойство rule является сокращением для свойств rule-color, rule-style и rule-width. Оно задаёт одинаковое значение для сокращённых свойств row-rule и column-rule.

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

Если значение свойства состоит только из одного <gap-rule>, все правила строк и столбцов будут иметь такой стиль, цвет и размер. Если задать следующее, все правила строк и столбцов будут dashed red 3px:

rule: dashed red 3px;

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

rule:
  dashed red 3px,
  dotted blue 5px;

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

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

rule:
  solid red 5px,
  outset blue 10px,
  inset green 1px,
  outset blue 10px,
  inset green 1px,
  outset blue 10px,
  inset green 1px;
rule:
  solid red 5px,
  repeat(3, outset blue 10px, inset green 1px);

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

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

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

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

rule:
  solid red 5px,
  repeat(auto, dotted green 1px, dashed blue 1px),
  solid red 5px;

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

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

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

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

Примеры

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

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

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>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 и задавая для list-style-type значение none, чтобы убрать маркеры. Мы задаём gap размером 5px, чтобы между столбцами и строками было достаточно места для нашего правила dashed 3px magenta.

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

  rule: dashed 3px magenta;
}
li {
  text-align: center;
  aspect-ratio: 1;
}

Результат

Несколько правил для промежутков и значения по умолчанию

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

Используя те же HTML и CSS, что и в предыдущем примере, мы задаём в качестве значения rule четыре значения <gap-rule>, разделённые запятыми, опуская <line-width> в первом <gap-rule>, <color> во втором и <line-style> в третьем; четвёртое значение содержит все три компонента:

ul {
  rule:
    red dashed,
    1px dotted,
    5px blue,
    10px magenta solid;
}

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

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

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

ul {
  rule:
    3px red dashed,
    repeat(3, dotted green 1px, dashed blue 1px),
    3px red dashed;
}

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

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

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

Используя repeat(auto, <gap-rule>), мы задаём для всех правил строк и столбцов значение 1px dotted (цвет по умолчанию совпадает с текущим цветом), кроме первых и последних правил, для которых задаём значение 3px solid red.

ul {
  rule:
    3px red solid,
    repeat(auto, 1px dotted),
    3px red solid;
}

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

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

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

См. также

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