Свойство CSS column-rule-color
Свойство column-rule-color задаёт цвет разделительной линии.
Свойство column-rule-color входит в число свойств CSS3.
Цвет разделительной линии также можно задать с помощью сокращённого свойства column-rule.
Подбор веб-цветов вы можете найти в разделе Цвета HTML, а выбрать нужный оттенок поможет наш инструмент Палитра цветов.
| Начальное значение | currentColor |
|---|---|
| Применяется к | Элементам с многостолбцовым макетом. |
| Наследуется | Нет. |
| Анимация | Да. Цвет разделительной линии можно анимировать. |
| Версия | CSS3 |
| Синтаксис DOM | object.style.columnRuleColor = "#666"; |
Синтаксис
Синтаксис свойства CSS column-rule-color
css
column-rule-color: color | initial | inherit;Пример использования свойства column-rule-color:
Пример использования свойства CSS column-rule-color со значением lightgreen
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 20px;
column-rule-style: dashed;
column-rule-color: lightgreen;
}
</style>
</head>
<body>
<h1>The column-rule-color 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>INFO
Вы можете указать шестнадцатеричное значение, RGB, RGBA, HSL, HSLA или название цвета в качестве значения для свойства column-rule-color.
Пример использования свойства column-rule-color со значением «hexadecimal»:
Пример использования свойства CSS column-rule-color со шестнадцатеричным значением
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 40px;
column-rule-style: solid;
column-rule-color: #8ebf42;
}
</style>
</head>
<body>
<h1>The column-rule-color 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>Результат
Пример использования свойства column-rule-color со значением «RGB»:
Пример использования свойства CSS column-rule-color со значением RGB
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 40px;
column-rule-style: double;
column-rule-color: rgb(234, 211, 21);
}
</style>
</head>
<body>
<h1>The column-rule-color 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>Пример использования свойства column-rule-color со значением «HSL»:
Пример использования свойства CSS column-rule-color со значением HSL
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 30px;
column-rule-style: solid;
column-rule-color: hsl(351, 97%, 57%);
}
</style>
</head>
<body>
<h1>The column-rule-color 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>Значения
| Значение | Описание | Запустить |
|---|---|---|
| color | Задаёт цвет разделительной линии. Можно использовать названия цветов, шестнадцатеричные коды, rgb(), rgba(), hsl(), hsla(). | Запустить » |
| initial | Устанавливает свойству значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Практика
В чём заключается назначение свойства CSS 'column-rule-color'?