column-rule-color
Интерактивный пример
CSS свойство column-rule-color
устанавливает цвет линии, расположенной между колонками при мультиколоночной вёрстке.
Синтаксис
/* Значения <color> */
column-rule-color: red;
column-rule-color: rgb(192, 56, 78);
column-rule-color: transparent;
column-rule-color: hsla(0, 100%, 50%, 0.6);
/* Глобальные значения */
column-rule-color: inherit;
column-rule-color: initial;
column-rule-color: unset;
Свойство column-rule-color
указывает одиночное значение <color>
.
Значения
<color>
- Цвет линий, разделяющих столбцы.
Формальный синтаксис
column-rule-color =
<color>
<color> =
<absolute-color-base> | (en-US)
currentcolor | (en-US)
<system-color> | (en-US)
<device-cmyk()>
<absolute-color-base> =
<hex-color> (en-US) | (en-US)
<named-color> | (en-US)
transparent | (en-US)
<rgb()> | (en-US)
<rgba()> | (en-US)
<hsl()> | (en-US)
<hsla()> | (en-US)
<hwb()> | (en-US)
<lab()> | (en-US)
<lch()> | (en-US)
<oklab()> | (en-US)
<oklch()> | (en-US)
<color()>
<device-cmyk()> =
device-cmyk( <cmyk-component>{4} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) )
<rgb()> =
rgb( [ (en-US) <percentage> | (en-US) none ] (en-US){3} (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) ) | (en-US)
rgb( [ (en-US) <number> | (en-US) none ] (en-US){3} (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )
<hsl()> =
hsl( [ (en-US) <hue> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )
<hwb()> =
hwb( [ (en-US) <hue> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )
<lab()> =
lab( [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )
<lch()> =
lch( [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <hue> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )
<oklab()> =
oklab( [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )
<oklch()> =
oklch( [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <hue> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )
<color()> =
color( <colorspace-params> [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )
<cmyk-component> =
<number> | (en-US)
<percentage>
<alpha-value> =
<number> | (en-US)
<percentage>
<hue> =
<number> | (en-US)
<angle> | (en-US)
none
<colorspace-params> =
<predefined-rgb-params> | (en-US)
<xyz-params>
<predefined-rgb-params> =
<predefined-rgb> [ (en-US) <number> | (en-US) <percentage> | (en-US) none ] (en-US){3} (en-US)
<xyz-params> =
<xyz-space> [ (en-US) <number> | (en-US) none ] (en-US){3} (en-US)
<predefined-rgb> =
srgb | (en-US)
srgb-linear | (en-US)
display-p3 | (en-US)
a98-rgb | (en-US)
prophoto-rgb | (en-US)
rec2020
<xyz-space> =
xyz | (en-US)
xyz-d50 | (en-US)
xyz-d65
Пример
HTML
<p>This is a bunch of text split into three columns.
The `column-rule-color` property is used to change
the color 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-color: blue;
}
Результат
Спецификации
Specification |
---|
CSS Multi-column Layout Module Level 2 # crc |
Начальное значение | currentcolor |
---|---|
Применяется к | мультиколоночные элементы |
Наследуется | нет |
Обработка значения | вычисленный цвет |
Animation type | цвет |
Поддержка браузерами
BCD tables only load in the browser
Смотрите также
- The
<color>
data type - Other color-related properties:
color
(en-US),background-color
,border-color
(en-US),outline-color
(en-US),text-decoration-color
(en-US),text-emphasis-color
(en-US),text-shadow
, andcaret-color
(en-US) - Applying color to HTML elements using CSS