Стил колона-правило - CSS-трикове

Съдържание:

Anonim

На column-rule-styleуточнява, CSS собственост Вид на линията, която е прокарана между колоните в оформлението на 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 опера мини
85+ 79+ Не 3.2+ всичко
Източник: caniuse

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

Модул за оформление на няколко колони CSS Ниво 1 (Чернова на редактора)