column-rule
Краткая форма записи CSS свойств column-rule
устанавливает ширину, стиль и цвет линии, находящейся между колонками в мультиколоночной вёрстке.
Интерактивный пример
Эта краткая форма записи задаёт индивидуальные column-rule-*
свойства, обычно задаваемые: column-rule-width
, column-rule-style
, и column-rule-color
.
Примечание: Как и с другими краткими формами записи, любые индивидуальные значения, не указанные явно принимают значение по умолчанию (возможно переопределение значений, заданных ранее с помощью свойств, не являющихся краткими формами).
Синтаксис
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
. <'column-rule-color'>
-
Значение
<color>
.
Формальный синтаксис
column-rule =
<'column-rule-width'> ||
<'column-rule-style'> ||
<'column-rule-color'>
<column-rule-width> =
<line-width>
<column-rule-style> =
<line-style>
<column-rule-color> =
<color>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
Примеры
Example 1
/* Аналогично "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
<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
.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