column-rule-width

Базовая линия Широко распространена

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с марта 2017 года.

Свойство column-rule-width CSS задаёт ширину линии, проведённой между колонками в многоколоночном макете.

Попробовать

Синтаксис

/* Keyword values */
column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;

/* <length> values */
column-rule-width: 1px;
column-rule-width: 2.5em;

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

Свойство column-rule-width задаётся единственным <'border-width'> значением.

Значения

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

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

Начальное значение	`medium`
Применяется к	элементам multicol
Наследуется	нет
Вычисленное значение	абсолютная длина; `0` если `column-rule-style` равна `none` или `hidden`
Тип анимации	длина

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

column-rule-width = 
  <line-width>  

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

Примеры

Установка толстой колоночной линии

HTML

<p>
  This is a bunch of text split into three columns. The `column-rule-width`
  property is used to change the width of the line that is drawn between
  columns. Don't you think that's wonderful?
</p>

CSS

p {
  column-count: 3;
  column-rule-style: solid;
  column-rule-width: thick;
}

Результат

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

Спецификация
CSS Multi-column Layout Module Level 1 # crw

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`column-rule-width`	501	1212	523.5–74	11.115	93	5018	524	11.114	91	5.01.0	504.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-width