设置列之间的颜色规则：
div
{
-moz-column-rule-style:dotted/* Firefox */
-webkit-column-rule-style:dotted/* Safari 和 Chrome */
column-rule-style:dotted
}
亲自试一试
页面底部有更多实例。
浏览器支持
IEFirefoxChromeSafariOpera
Internet Explorer 10 和 Opera 支持 column-rule-style 属性。
Firefox 支持替代的 -moz-column-rule-style 属性。
Safari 和 Chrome 支持替代的 -webkit-column-rule-style 属性。
注释：Internet Explorer 9 以及更早版本的浏览器不支持 column-rule-style 属性。
定义和用法
column-rule-style 属性规定列之间的样式规则。
默认值：none
继承性：no
版本：CSS3
JavaScript 语法：object.style.columnRuleStyle="dotted"
语法
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset
值描述测试
none定义没有规则。测试
hidden定义隐藏规则。测试
dotted定义点状规则。测试
dashed定义虚线规则。测试
solid定义实线规则。测试
double定义双线规则。测试
groove定义 3D grooved 规则。该效果取决于宽度和颜色值。测试
ridge定义 3D ridged 规则。该效果取决于宽度和颜色值。测试
inset定义 3D inset 规则。该效果取决于宽度和颜色值。测试
outset定义 3D outset 规则。该效果取决于宽度和颜色值。测试
亲自试一试 - 实例
Column-count
把 div 元素中的文本划分为三列。
Column-gap
将 div 元素中的文本分为三列，并列间 30 像素的间隔。
Column-rule
规定列之间的宽度、样式和颜色。
在正式绘制边框前，我们先认识一下CSS3 border-image-slice 属性，它可以将border-image-source获取的边框背景图片切割为9份。语法如下：border-image:border-image-source slice-width{1,4}
slice-width的值可以是具体像素，也可以是百分比。切割后的图片块分别是
border-top-left-image border-top-image border-top-right-image
border-left-image border-right-image
border-bottom-left-image border-bottom-image border-bottom-right-image
其中，border-top-image和border-bottom-image区域受到水平方向效果影响，如果是repeat则此区域图片会水平重复，如果是round则会水平平铺，责任stretch则被水平拉升。而我们设置虚线，则选择repeat/round都可以。
