column-rule
Краткая форма записи CSS свойств column-rule
устанавливает ширину, стиль и цвет линии, находящейся между колонками в мультиколоночной вёрстке.
Интерактивный пример
Эта краткая форма записи задаёт индивидуальные column-rule-*
свойства, обычно задаваемые: column-rule-width
(en-US), column-rule-style
, и column-rule-color
.
Примечание: Как и с другими краткими формами записи, любые индивидуальные значения, не указанные явно принимают значение по умолчанию (возможно переопределение значений, заданных ранее с помощью свойств, не являющихся краткими формами).
Синтаксис
css
column-rule: dotted;
column-rule: solid 8px;
column-rule: solid blue;
column-rule: thick inset blue;
/* глобальные значения */
column-rule: inherit;
column-rule: initial;
column-rule: unset;
Свойство column-rule
указывается в виде одного, двух или трёх значений, перечисленных ниже, в любом порядке.
Значения
<'column-rule-width'>
-
<length>
или одно из трёх ключевых свойств,thin
,medium
, илиthick
. См. подробно -border-width
. <'column-rule-style'>
-
См. подробно
border-style
(en-US) . <'column-rule-color'>
-
Значение
<color>
.
Формальный синтаксис
column-rule =
<'column-rule-width'> || (en-US)
<'column-rule-style'> || (en-US)
<'column-rule-color'>
Примеры
Example 1
css
/* Аналогично "medium dotted currentColor" */
p.foo {
column-rule: dotted;
}
/* Аналогично "medium solid blue" */
p.bar {
column-rule: solid blue;
}
/* Аналогично "8px solid currentColor" */
p.baz {
column-rule: solid 8px;
}
p.abc {
column-rule: thick inset blue;
}
Example 2
HTML
html
<p class="content-box">
This is a bunch of text split into three columns. Take note of how the
`column-rule` property is used to adjust the style, width, and color of the
rule that appears between the columns.
</p>
CSS
css
.content-box {
padding: 0.3em;
background: #ff7;
column-count: 3;
column-rule: inset 2px #33f;
}
Результат
Спецификации
Specification |
---|
CSS Multi-column Layout Module Level 1 # column-rule |
Начальное значение | как и у каждого из подсвойств этого свойства:
|
---|---|
Применяется к | мультиколоночные элементы |
Наследуется | нет |
Обработка значения | как и у каждого из подсвойств этого свойства:
|
Animation type | как и у каждого из подсвойств этого свойства: |
Поддержка браузерами
BCD tables only load in the browser