html.okpython.net
Основы создания сайтов
CSS :: Свойство column-rule-width
css-свойство column-rule-width (от англ. column rule width – ширина разделительной линии колонки) используется для установки ширины разделительных линий между колонками в многоколоночном элементе.
Характеристики
- Значение по умолчанию: medium.
- Применяется: к многоколоночным элементам.
- Наследуется: нет.
- Анимируется: да.
- JavaScript: object.style.columnRuleWidth="value".
Синтаксис
column-rule-width: <ширина> | thin | medium | thick
Значения
- ширина – принимаются любые единицы измерения (смотреть), используемые в CSS. Проценты использовать не разрешается.
- thin – устанавливает тонкую разделительную линию.
- medium – устанавливает среднюю разделительную линию.
- thick – устанавливает толстую разделительную линию.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-multicol-1/#propdef-column-rule-width
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/column-rule-width
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p{ width: 400px; height: 300px; margin: 1em; padding: 0.7em; column-count: 3; column-rule: dashed green; } .p_1{ border: 1px solid green; column-rule-width: 1px; } .p_2{ border: 0.3em solid green; column-rule-width: 0.3em; } </style> </head> <body> <p class="p_1"> Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </p> <p class="p_2"> Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </p> </body> </html>
Пример №1