css властивість column-rule-width


Властивість column-rule-width у багатоколонковому тексті задає товщину ліній між колонками.

Властивість `column-rule-width`

Властивість column-rule відображається як певна межа, яка з'являється між стовпцями на макеті з декількома стовпцями.

Властивість column-rule-width слід використовувати разом із властивостями column-rule-style, інакше використання цієї властивості не буде мати ефекту (через відсутність значення "стиль").

Значення:

Три змінні - thin (2 пікселя), medium (4 пікселя) і thick (6 пікселів) задають товщину лінії. Для більш точного значення товщину можна вказувати в пікселях або інших одиницях.

Порада:

Ви можете використовувати універсальну властивість column-rule, щоб встановити ширину, стиль і колір стовпчика в одному місці.

Порада:

Специфікація не визначає чітко товщину кожного з ключових слів (thin, medium, thick). Проте вимагає, щоб вони розташовувалися один за одним: thin ≤ medium ≤ thick, та мали постійне значення в межах одного документу.

Синтакс

column-rule-width: medium|thin|thick|length|initial|inherit;

Властивість column-rule-width може отримувати 6 значень:

medium

Звичайна лінія (4 пікселя). Без задання.

thin

Тонка лінія (2 пікселя)

thick

Товста лінія (6 пікселей)

length

Товщина лінії в пікселях або інших одиницях.

initial

Встановлює цю властивість в значення без задання

inherit

Успадкує значення властивості від свого батьківського елемента

Значення без задання: medium
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.columnRuleWidth="10px"

Переглядачі

Переглядач
column-rule-width

1.0 -webkit-

10.0

3.5 -moz-

3.0 -webkit-

11.1

12.0

Переглядач
column-rule-width

1.0 -webkit-

3.5 -moz-

3.0 -webkit-

Приклади


Динамічний приклад зі значенням у вигляді числа

Приклад використання

Товщина лінії буде 1 піксель.

div { 
  -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */ 
  -moz-column-rule-width: 1px; /* Firefox */ 
  column-rule-width: 1px; 
}

Додаткові посилання

Всі Коментарі (0)

Зареєструйся на сайті, аби мати змогу залишати коментарі. Зареєструватися  чи
Немає Коментарів