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

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

Попробуйте

rule-style: solid;

rule-style: dashed, dotted;

rule-style: repeat(2, inset, dashed, double);

rule-style: solid, repeat(auto, double), solid;

rule-style: hidden;

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

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

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

• column-rule-style
• row-rule-style

Синтаксис

/* One value */
rule-style: none;
rule-style: hidden;
rule-style: dotted;
rule-style: dashed;
rule-style: solid;
rule-style: double;
rule-style: groove;
rule-style: ridge;
rule-style: inset;
rule-style: outset;

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

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

Значения

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

Описание

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

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

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

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

rule-style: double;

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

rule-style: double, inset;

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

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

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

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

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

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

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

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

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

В этом случае не имеет значения, содержит ли контейнер 8, 15, 22 или 29 столбцов либо строк: первая и последняя линии всегда будут solid, а все остальные — dotted. Если столбцов и строк всего 2 или 3, пунктирных линий не будет.

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

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

Примеры

Базовое использование

В этом примере мы задаём один <line-style> для линий, проводимых между столбцами и строками элементов в контейнере 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 столбцов, создавая столбцы и строки с помощью свойства grid-template-columns, а затем задаём для свойства list-style-type значение none, чтобы убрать маркеры. Мы задаём свойству gap значение 5px, чтобы между столбцами и строками было достаточно места для линии thick dashed orange.

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

  rule-style: dashed;
}
li {
  text-align: center;
  aspect-ratio: 1;
}

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

Результат

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

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

Для свойства rule-style мы задаём список, разделённый запятыми, со всеми возможными значениями <line-style>.

ul {
  rule-style:
    dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden;
}

Результат

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

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

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

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

ul {
  rule-style: solid, groove, double;
}

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

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

ul {
  rule-style: solid, repeat(3, inset, outset), solid;
}

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

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

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

С помощью repeat(auto, <line-style>) мы задаём для всех линий столбцов и строк стиль groove, кроме первой и последней, которым задаём стиль solid.

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

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

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

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

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

См. также

• rule-color
• rule-width
• column-rule-style
• row-rule-style
• Сокращённая запись rule
• Модуль CSS gaps