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;

浏览器支持

语法

取值：

• ：设置或检索对象的列与列之间的边框厚度。
• ：设置或检索对象的列与列之间的边框样式。
• ：设置或检索对象的列与列之间的边框颜色。

实例

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*/
}

例子

.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;
} 
效果：
第一列文字部分：内容内容内容内容内容内容
第二列文字部分：内容内容内容内容内容内容
第三列文字部分：内容内容内容内容内容内容
第四列文字部分：内容内容内容内容内容内容
第五列文字部分：内容内容内容内容内容内容

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com