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

Съдържание

За да направите колоните различни, можете да добавите вертикална линия между всяка колона. Линията се намира в центъра на процепа на колоната. Ако някога сте стилизирали border, значи сте готови да стилизирате column-rule.

.container ( -webkit-columns: 2 400px; -moz-columns: 2 400px; columns: 2 400px; -webkit-column-rule: 1px solid black; -moz-column-rule: 1px solid black; column-rule: 1px solid black; )

Свойството е съкратено за column-rule-width, column-rule-styleи column-rule-color, което е същият модел borderи приема същите стойности.

-webkit-column-rule-width: 1px; -moz-column-rule-width: 1px; column-rule-width: 1px; -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; -webkit-column-rule-color: black; -moz-column-rule-color: black; column-rule-color: black;

column-rule-widthможе да бъде дължина като 3pxили стойност на ключова дума като thin.

column-rule-styleможе да бъде всяка от border-styleстойностите, като solid, dottedи dashed.

column-rule-color може да бъде всякаква стойност на цвета.

За разлика от това column-gap, column-ruleне заема място. Ако column-rule-widthе по-дебел от column-gapтогава, правилото ще се разшири под колоните.

Вертикалното правило ще съществува само между колони, които имат съдържание.