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

rule-width — это CSS-сокращённое свойство, которое задаёт ширину всех линий, нарисованных в промежутках между строками сетки, элементами flex-контейнера и колонками в многоколоночных макетах, устанавливая одинаковую ширину для линий между колонками и строками.

Попробуйте

rule-width: thin;

rule-width: thin, thick;

rule-width: 1px, 10px;

rule-width: repeat(2, thin, thick), 10px;

rule-width: thick, repeat(auto, 1px, 2px), thick;

<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 magenta;
}
#example-element i {
  padding: 5px;
}

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

Это сокращённое свойство для следующих CSS-свойств:

• column-rule-width
• row-rule-width

Синтаксис

/* Keyword values */
rule-width: thin;
rule-width: medium;
rule-width: thick;
rule-width: thin, medium, thick;
rule-width: thick, repeat(5, thin), thick;
rule-width: thick, repeat(auto, thin, medium), thick;

/* Length values */
rule-width: 1px;
rule-width: 5px;
rule-width: 1px, 3px, 5px;
rule-width: 5px, repeat(auto, 1px), 10px, 15px;
rule-width: 5px, repeat(5, 1px, 3px), 5px;

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

Значения

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

<line-width>

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

<repeat-line-width>

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

<auto-repeat-line-width>

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

Описание

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

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

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

Если значение свойства состоит только из одного <line-width>, все линии между строками и колонками будут иметь такую ширину. Если задать следующее, все линии будут иметь ширину 3px:

rule-width: 3px;

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

rule-width: thin, 1em;

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

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

rule-width: 1rem, thick, thin, thick, thin, thick, thin;
rule-width: 1rem, repeat(3, thick, thin);

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

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

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

rule-width: thin, repeat(auto, medium), thin;

В этом случае первая и последняя линии между колонками и строками всегда будут иметь ширину thin, а все остальные — medium. Если колонок и строк всего 2 или 3, линий средней ширины не будет.

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

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

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

Примеры

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

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

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 колонок. Добавляем gap размером 5px, чтобы между элементами было достаточно места для нашей 3px пунктирной красной линии:

ul {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  list-style-type: none;
  gap: 5px;
  rule-style: dashed;
  rule-color: red;
  rule-width: 3px;
}
li {
  text-align: center;
  aspect-ratio: 1;
}

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

Результат

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

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

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

ul {
  rule-width: thin, 6px, 12px;
}

Поскольку grid-контейнер содержит 8 строк и 10 колонок, в каждом направлении имеется соответственно семь и девять промежутков, поэтому последовательность из трёх значений <line-width> повторяется в обоих направлениях.

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

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

Мы используем те же HTML и CSS, что и в предыдущих примерах. Кроме того, мы объявляем два пользовательских свойства, которые используем в функции repeat() внутри значения rule-width. Функция repeat() задаёт список из двух значений <line-width>, повторяемый 3 раза.

ul {
  --base: 0.5vw;
  --secondary: 1vw;
  rule-width:
    15px,
    repeat(
      4,
      min(calc(var(--base) + 3px), 10px),
      abs(calc(var(--secondary) - 2px))
    ),
    15px;
}

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

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

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

Используя repeat(auto, <line-width>), мы задаём для всех линий между колонками и строками ширину 1px, кроме первой и последней, для которых задаём 5px.

ul {
  rule-width: 5px, repeat(auto, 1px), 5px;
}

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

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

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

См. также

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