CSS 属性column-rule 是一个简写属性，用于设置多列布局中各列之间绘制的线条的宽度、样式和颜色。
column-rule 是一个以下属性的简写:
属性值
CSS 属性column-rule 被指定为一个、两个或三个值，且顺序不限:
<'column-rule-color'>:采用 <color> 值。
<' column-rule-style'>:设置列规则的样式。请参阅 border-style 了解可能的值。
<'column-rule- width'>:采用 <length> 值或关键字（thin、medium 或thick）之一。请参阅 border-width 了解可能的值。
适用范围
所有 multicol 元素。
语法
column-rule = <'column-rule-color'> || <'column-rule-style'> || <'column-rule-width'> CSS column-rule: 基本示例
在以下示例中，column-rule 简写属性为用于添加具有颜色、样式和宽度值的规则，其顺序与指定的顺序相同:
<html>
<head>
<style>
.multicol-col-rule {
column-count: 3;
column-gap: 50px;
column-rule: 5px dashed blue;
}
p {
background-color: bisque;
}
</style>
</head>
<body>
<h1>column-rule 属性</h1>
<div class="multicol-col-rule">
<p>云对雨，雪对风。花对树，鸟对虫。山清对水秀，柳绿对桃红。</p>
<p>孩子如果已经长大，就得告别妈妈，四海为家。牛马有脚，鸟有翅膀，植物旅行又用什么办法？蒲公英妈妈准备了降落伞，把它送给自己的娃娃。只要有风轻轻吹过，孩子们就乘着风纷纷出发。苍耳妈妈有个好办法，她给孩子穿上带刺的铠甲。只要挂住动物的皮毛，孩子们就能去田野、山洼。豌豆妈妈更有办法，她让豆荚晒在太阳底下，啪的一声，豆荚炸开，孩子们就蹦着跳着离开妈妈。植物妈妈的办法很多很多，不信你就仔细观察。那里有许许多多的知识，粗心的小朋友却得不到它。</p>
</div>
</body>
</html> CSS column-rule: 顺序
在以下示例中，column-rule 简写属性用于添加具有样式、宽度和颜色值的规则，其顺序与指定的顺序相同:
<html>
<head>
<style>
.multicol-col-rule {
column-count: 3;
column-gap: 50px;
column-rule: inset 10px purple;
}
p {
background-color: pink;
}
</style>
</head>
<body>
<h1>column-rule 属性</h1>
<div class="multicol-col-rule">
<p>云对雨，雪对风。花对树，鸟对虫。山清对水秀，柳绿对桃红。</p>
<p>孩子如果已经长大，就得告别妈妈，四海为家。牛马有脚，鸟有翅膀，植物旅行又用什么办法？蒲公英妈妈准备了降落伞，把它送给自己的娃娃。只要有风轻轻吹过，孩子们就乘着风纷纷出发。苍耳妈妈有个好办法，她给孩子穿上带刺的铠甲。只要挂住动物的皮毛，孩子们就能去田野、山洼。豌豆妈妈更有办法，她让豆荚晒在太阳底下，啪的一声，豆荚炸开，孩子们就蹦着跳着离开妈妈。植物妈妈的办法很多很多，不信你就仔细观察。那里有许许多多的知识，粗心的小朋友却得不到它。</p>
</div>
</body>
</html>