Колонка-правило-ширина - CSS-хитрощі

Зміст:

Anonim

column-rule-widthВластивість CSS задає товщину лінії, яка малюється між колонами шляхом column-rule-styleв макеті кілька стовпців CSS.

.columns ( columns: 2 600px; column-rule-style: dotted; column-rule-width: 3px; )

Інший спосіб це зробити - скористатися column-ruleскороченим властивістю, яке поєднує column-rule-width, column-rule-styleі column-rule-color.

.columns ( columns: 2 600px; column-rule: dotted 3px #f8a100; )

Синтаксис

column-rule-width: thin | medium | thick |
  • Початкове значення: medium
  • Застосовується до: багатоколонних контейнерів
  • Успадковано: ні
  • Обчислене значення: абсолютна довжина; 0якщо column-rule-styleє noneабоhidden
  • Тип анімації: за типом обчислюваного значення

Цінності

column-rule-width приймає одне іменоване, довжинне або глобальне значення.

/* Named values */ column-rule-width: thin; column-rule-width: medium; column-rule-width: thick; /* Length values */ column-rule-width: 15px; column-rule-width: 1.5rem; /* Global values */ column-rule-width: inherit; column-rule-width: initial; column-rule-width: unset;

Демо

Підтримка браузера

IE Край Firefox Chrome Сафарі Опера
10+ 12+ 3,5+ 4+ 3.1+ 11,5+
Android Chrome Android Firefox Браузер Android iOS Safari Opera Mini
85+ 79+ Ні 3,2+ Всі
Джерело: caniuse

Специфікація

Модуль макета CSS з декількома стовпцями рівень 1 (проект редактора)