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

Зміст:

Anonim

В column-rule-styleCSS властивість специфицирует тип лінії , який звертається між колонами в макеті CSS декілька стовпців.

Власність начебто обмежена сама по собі. Коли ми оголосимо це, він проведе лінію між стовпцями CSS шириною в один піксель і чорним.

.columns ( columns: 2 600px; column-rule-style: solid; )

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

.columns ( columns: 2 600px; column-rule-style: solid; column-rule-width: 3px; column-rule-color: #f8a100; )

Або, привіт, ми можемо просто використати column-ruleскорочене властивість, яке поєднує всі три в одній декларації:

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

Синтаксис

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

Цінності

column-rule-style приймає такі значення:

/* Keyword values */ column-rule-style: none; column-rule-style: hidden; column-rule-style: dotted; column-rule-style: dashed; column-rule-style: solid; column-rule-style: double; column-rule-style: groove; column-rule-style: ridge; column-rule-style: inset; column-rule-style: outset; /* Global values */ column-rule-style: inherit; column-rule-style: initial; column-rule-style: unset;

Демо

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

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

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

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