column-rule

版本：CSS3

在多列布局中，column-rule 属性规定了列与列之间的直线，也称“规则”。该简写可以避免单独设置各个 column-rule-*属性：column-rule-width，column-rule-style和column-rule-color。

示例

column-rule: dotted;
column-rule: solid blue;
column-rule: solid 8px;
column-rule: thick inset blue;

浏览器支持

IE10以上版本的浏览器都支持column-rule

语法

column-rule:<column-rule-width>||<column-rule-style>||<column-rule-color>

取值：

• <column-rule-width>：设置或检索对象的列与列之间的边框厚度。
• <column-rule-style>：设置或检索对象的列与列之间的边框样式。
• <column-rule-color>：设置或检索对象的列与列之间的边框颜色。

实例

p.foo { column-rule: dotted; } /* same as "medium dotted currentcolor" */
p.bar { column-rule: solid blue; } /* same as "medium solid blue" */
p.baz { column-rule: solid 8px; } /* same as "8px solid currentcolor" */
p.abc { column-rule: thick inset blue; }

div
{
column-rule:3px outset #ff00ff;
-moz-column-rule:3px outset #ff00ff;/*firefox*/
-webkit-column-rule:3px outset #ff00ff;/*safari and chrome*/
}

例子

<style>
.content-box {
	width:20%;
	padding:20px;
	border: 10px solid #000000;
	column-count:3;
	column-rule: 5px dotted blue;
	-moz-column-rule: 5px dotted blue;/*firefox*/
	-webkit-column-rule: 5px dotted blue;/*safari and chrome*/
}
.content-box .items
{
	border:1px solid #ff6633;
	padding:10px;
	height:100%;
	overflow:hidden;
}

</style>

<h3>效果：</h3>
<div class="content-box">
	<p class="items">第一列文字部分：内容内容内容内容内容内容</p>
	<p class="items">第二列文字部分：内容内容内容内容内容内容</p>
	<p class="items">第三列文字部分：内容内容内容内容内容内容</p>
	<p class="items">第四列文字部分：内容内容内容内容内容内容</p>
	<p class="items">第五列文字部分：内容内容内容内容内容内容</p>
</div>