Свойство CSS column-rule-width
The column-rule-width CSS property sets the width of the rule between columns. Read about the rules of the property and learn the values with the help of examples.
Свойство CSS column-rule-width определяет толщину разделительной линии между колонками. Свойство column-rule-width является одним из свойств CSS3.
Свойство column-rule-width действует только тогда, когда column-rule-style не равен none.
Это свойство принимает следующие значения:
- medium
- thick
- thin
- length
info
В спецификации не определена точная толщина каждого ключевого слова. Однако они всегда следуют этому порядку: thin ≤ medium ≤ thick.
| Начальное значение | medium |
|---|---|
| Применяется к | Элементам с несколькими колонками. |
| Наследуется | Нет. |
| Анимация | Да. Толщина и цвет линии анимируются. |
| Версия | CSS3 |
| DOM-синтаксис | object.style.columnRuleWidth = "5px"; |
Синтаксис
Синтаксис свойства CSS column-rule-width
column-rule-width: medium | thin | thick | length | initial | inherit;Пример свойства column-rule-width:
Пример использования свойства CSS column-rule-width со значением thick
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 40px;
column-rule-style: dotted;
column-rule-color: #666;
column-rule-width: thick;
text-align: justify;
}
</style>
</head>
<body>
<h1>Column-rule-width property 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-width со значением "thin":
Пример использования свойства CSS column-rule-width со значением thin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 40px;
column-rule-style: solid;
column-rule-width: thin;
text-align: justify;
}
</style>
</head>
<body>
<h1>Column-rule-width property 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-width со значением "15px":
Пример использования свойства CSS column-rule-width со значением длины
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 40px;
column-rule-style: groove;
column-rule-color: #1c87c9;
column-rule-width: 15px;
text-align: justify;
}
</style>
</head>
<body>
<h1>Column-rule-width property 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>Значения
| Значение | Описание | Запустить |
|---|---|---|
| medium | Линия средней толщины. Это значение по умолчанию. | Запустить » |
| thick | Линия толстая. | Запустить » |
| thin | Линия тонкая. | Запустить » |
| length | Указывает толщину линии. | Запустить » |
| initial | Устанавливает свойству значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Что делает свойство 'column-rule-width' в CSS?