W3docs
ru
Войти

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

Свойство CSS column-rule-style задаёт стиль линии между колонками. Изучите значения с примерами.

Свойство CSS column-rule-style задаёт стиль линии (разделителя), нарисованной между колонками многоколоночного макета. Разделитель колонок работает так же, как border: он располагается внутри column-gap и визуально разделяет соседние колонки, принимая те же стили линий, что и рамка.

Это свойство входит в число свойств CSS3.

column-rule-style — одно из трёх подсвойств сокращённого свойства column-rule, наряду с column-rule-width и column-rule-color. Само по себе оно управляет только формой линии — как правило, все три свойства используются вместе для получения видимого результата.

Когда использовать

Используйте column-rule-style, когда разбиваете текст на несколько колонок и хотите добавить видимый разделитель — как в газетном или журнальном макете. Поскольку разделитель находится внутри промежутка, он не занимает дополнительного пространства и не раздвигает содержимое, что делает его удобным способом разделения колонок без изменения ширины макета.

Для использования этого свойства сначала необходимо превратить элемент в многоколоночный контейнер с помощью свойств columns или column-count — разделитель не имеет смысла при наличии только одной колонки.

На что обратить внимание

  • По умолчанию разделитель невидим, поскольку начальное значение стиля равно none. Даже после установки стиля разделитель не отобразится, если column-rule-width не больше 0 (ширина по умолчанию — medium, что обычно видимо).
  • 3D-стили — groove, ridge, inset и outset — зависят от цвета разделителя. При очень светлом или transparent цвете 3D-эффект может быть плохо виден; задайте column-rule-color явно.
  • hidden и none оба не рисуют ничего, однако hidden всё равно резервирует ширину в промежутке, тогда как none сворачивается до нулевой ширины — разница важна только при стыковке с другими стилями разделителей.

Свойство column-rule-style принимает следующие значения:

  • none
  • hidden
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
Начальное значениеnone
Применяется кМногоколоночным элементам.
НаследуетсяНет.
АнимируетсяНет.
ВерсияCSS3
DOM Syntaxobject.style.columnRuleStyle = "dashed" ;

Синтаксис

Синтаксис свойства CSS column-rule-style

column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Пример свойства column-rule-style:

Пример свойства CSS column-rule-style со значением dotted

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 3;
        column-gap: 30px;
        column-rule-style: dotted;
      }
    </style>
  </head>
  <body>
    <h2>Column-rule-style property example</h2>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>
Попробуйте сами »

Результат

Свойство CSS column-rule-style с пунктирным разделителем между тремя колонками

В следующем примере разделитель между колонками задан как double. Здесь разделителю присвоен цвет с помощью свойства column-rule-color и явная толщина с помощью column-rule-width, поэтому двойная линия хорошо видна.

Пример свойства column-rule-style со значением "double":

Пример свойства CSS column-rule-style со значением double

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 3;
        column-gap: 30px;
        column-rule-style: double;
        column-rule-color: #1c87c9;
        column-rule-width: 5px;
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <h1>Column-rule-style property example</h1>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>
Попробуйте сами »

Значения

ЗначениеОписание
noneРазделитель не задан. Это значение по умолчанию.
hiddenРазделитель скрыт.
dottedРазделитель в виде точек.
dashedРазделитель в виде штрихов.
solidСплошной разделитель.
doubleДвойной разделитель.
grooveРазделитель в виде 3D-канавки. Эффект определяется значениями ширины и цвета.
ridgeРазделитель в виде 3D-гребня. Эффект определяется значениями ширины и цвета.
insetРазделитель в виде 3D-вдавленности. Эффект определяется значениями ширины и цвета.
outsetРазделитель в виде 3D-выпуклости. Эффект определяется значениями ширины и цвета.
initialУстанавливает свойство в значение по умолчанию.
inheritНаследует свойство от родительского элемента.

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

  • column-rule — сокращённое свойство, задающее ширину, стиль и цвет одновременно.
  • column-rule-width — толщина разделителя.
  • column-rule-color — цвет разделителя.
  • column-gap — промежуток, внутри которого рисуется разделитель.
  • column-count и columns — создают многоколоночный макет.

Практика

Практика
Какие из следующих утверждений верны относительно свойства CSS column-rule-style?
Какие из следующих утверждений верны относительно свойства CSS column-rule-style?
Was this page helpful?