Kolumnregel - CSS-tricks

Innehållsförteckning

För att göra kolumner tydliga kan du lägga till en vertikal linje mellan varje kolumn. Linjen sitter i mitten av kolumngapet. Om du någonsin har stylat borderär du redo att forma 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; )

Fastigheten är förkortning för column-rule-width, column-rule-styleoch column-rule-color, vilket är samma mönster som borderoch accepterar samma värden.

-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-widthkan ha en längd som 3pxeller ett nyckelordsvärde som thin.

column-rule-stylekan vara någon av de border-stylevärden som solid, dottedoch dashed.

column-rule-color kan vara vilket färgvärde som helst.

Till skillnad från column-gap, column-ruleinte tar upp plats. Om den column-rule-widthär tjockare än den column-gapkommer regeln att expandera under kolumnerna.

Den vertikala regeln finns bara mellan kolumner som har innehåll.