css властивість column-rule-style
Властивість column-rule-style у багатоколонковому тексті задає стиль ліній між колонками. Якщо стиль явно не вказано, то колір тексту в колонках і колір ліній між ними збігається.
Властивість column-rule відображається як певна межа, яка з'являється між стовпцями на макеті з декількома стовпцями.
Властивість column-rule-style слід використовувати разом із властивостями
column-rule-width, інакше використання цієї
властивості не буде мати ефекту (через відсутність значення "ширина").
- Нотатка
-
Ви можете використовувати універсальну властивість
автор: Svitlanacolumn-rule, щоб встановити ширину, стиль і колір стовпчика в одному місці.
Синтаксис
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;Властивість column-rule-style може отримувати 12 значень:
-
none -
Лінія не відображається і її товщина обнуляється.
автор: Svitlana -
hidden -
Прихована лінія. Аналогічно none.
автор: Svitlana -
dotted -
Пунктирна лінія з набору точок.
автор: Svitlana -
dashed -
Пунктирна лінія з серії коротких відрізків.
автор: Svitlana -
solid -
Суцільна лінія.
автор: Svitlana -
double -
Подвійна лінія.
автор: Svitlana -
groove -
Створює ефект втисненої лінії. Ефект залежить від значень ширини і кольору.
автор: Svitlana -
ridge -
Створює ефект рельєфної лінії. Ефект залежить від значень ширини і кольору.
автор: Svitlana -
inset -
Створює об'ємну лінію.
автор: Svitlana -
outset -
Створює об'ємну лінію.
автор: Svitlana -
initial -
Встановлює цю властивість в значення без задання
автор: Svitlana -
inherit -
Успадкує значення властивості від свого батьківського елемента
автор: Svitlana
| Значення без задання: | none |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.columnRuleStyle="dotted" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| column-rule-style | 1.0 -webkit- | 3.5 -moz- | 3.0 -webkit- | 11.1 | 12.0 | 10.0 |
| Переглядач |  |
 |
 |
|---|---|---|---|
| column-rule-style | 1.0 -webkit- | 3.5 -moz- | 3.0 -webkit- |
Приклади
+ запропонувати свій приклад у пісочниці
Стиль лінії між колонками — крапчастий, як border-style, лише для розділювача.
HTML
<div class="cols">Багатоколонкова верстка ділить текст автоматично: браузер сам вирішує, де перервати рядок і почати нову колонку. Що довший текст, то краще видно поділ — тому цей абзац навмисно багатослівний і ще й трохи повторюється, щоб колонкам було чим заповнитися.</div>CSS
.cols {
column-count: 3;
column-rule-style: dotted;
}Значення у дії
Приклад використання
Коментарі
Коментарів ще немає — будьте першим!