Колона-правило-стил - ЦСС-трикови

Преглед садржаја:

Anonim

У column-rule-styleособину одређује ЦСС тип линије која је повучена између стубова у изгледу ЦСС више колона.

Имовина је некако ограничена сама за себе. Када га прогласимо, повући ће линију између ЦСС ступаца ширине једног пиксела и црне боје.

.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;

Демо

Подршка прегледача

ИЕ Ивица Фирефок Хром Сафари Опера
10+ 12+ 3.5+ 4+ 3.2+ 11.5+
Андроид Цхроме Андроид Фирефок Андроид претраживач иОС Сафари опера мини
85+ 79+ Не 3.2+ Све
Извор: каниус

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

ЦСС модул распореда у више колона ниво 1 (Нацрт уредника)