5、列表边框column-rule
column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。有点类似于常用的border属性。
但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。
语法规则：
column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>
取值说明：
| 属性值 | 属性值说明 |
| column-rule-width | 类似于border-width属性，主要用来定义列边框的宽度，其默认值为“medium”，column-rule-width属性接受任意浮点数，但不接收负值。但也像border-width属性一样，可以使用关键词：medium、thick、thin |
| column-rule-style | l类似于border-style属性，主要用来定义列边框样式，其默认值为“none”。column-rule-style属性值与border-style属性值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。 |
| column-rule-color | 类似于border-color属性，主要用来定义列边框颜色，其默认值为前景色color的值，使用时相当于border-color。column-tule-color接受所有的颜色。如果不希望显示颜色，也可以将其设置为transparent（透明色）。 |
例如：为了能有效区分栏目列之间的关系，可以为其设置一个列边框。
代码为：
column-rule: 2px dotted green;
实例代码：
.columns{
padding:5px;
border:1px solid green;
width:900px;
margin:20px;
-webkit-column-count:3;
-mozt-column-count:3;
-o-column-count:3;
-mst-column-count:3;
column-count:3;
-webkit-column-gap:2em;
-moz-column-gap:2em;
-o-column-gap:2em;
-ms-column-gap:2em;
column-gap:2em;
-webkit-column-rule:3px solid gray;
-moz-column-rule:3px solid gray;
-o-column-rule:3px solid gray;
-ms-column-rule:3px solid gray;
column-rule:3px solid gray;
}
