语法
column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;
column-rule-style 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 30px;
-webkit-column-rule-style: dotted;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 30px;
-moz-column-rule-style: dotted;
column-count: 3;
column-gap: 30px;
column-rule-style: dotted;
}
</style>
</head>
<body>
<h2>Column-rule-style 属性示例</h2>
<div>
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
生活终归还得继续。
把痛苦停在昨天 把微笑留给明天。
你要多学点东西，你要多看会书，你要多运行些步，时间慢慢流，你想有一个更好的未来，那么从现在开始，你要，好好努力。
</div>
</body>
</html>
结果
在以下示例中，列之间的规则是双重的。
在此示例中，颜色是为具有 column-rule-color 属性的规则指定的。
具有“double”值的 column-rule-style 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 30px;
-webkit-column-rule-style: double;
-webkit-column-rule-width: 5px;
-webkit-column-rule-color: #1c87c9;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 30px;
-moz-column-rule-style: double;
-moz-column-rule-width: 5px;
-moz-column-rule-color: #1c87c9;
column-count: 3;
column-gap: 30px;
column-rule-style: double;
column-rule-color: #1c87c9;
column-rule-width: 5px;
text-align: justify;
}
</style>
</head>
<body>
<h1>Column-rule-style 属性示例</h1>
<div>
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
生活终归还得继续。
把痛苦停在昨天 把微笑留给明天。
你要多学点东西，你要多看会书，你要多运行些步，时间慢慢流，你想有一个更好的未来，那么从现在开始，你要，好好努力。
</div>
</body>
</html>
CSS column-rule-style 属性值说明
| 值 | 说明 |
|---|---|
| none | 没有定义规则。这是默认值。 |
| hidden | 规则是隐藏的。 |
| dotted | 规则是虚线。 |
| dashed | 规则是dashed。 |
| solid | 规则是solid。 |
| double | 规则是double。 |
| groove | 规则是三维groove。宽度和颜色值定义效果。 |
| ridge | 规则是三维脊线。宽度和颜色值定义效果。 |
| inset | 规则是三维inset。宽度和颜色值定义效果。 |
| outset | 规则是3D outset。宽度和颜色值定义效果。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
column-rule-style 指定列之间规则的样式。
列规则类似于可以添加到分隔相邻列的边框。
它也可以有像边框这样的样式。
此属性是 CSS3 属性之一。
应该定义列或者列数属性，因为应该有列来为其指定样式。
column-rule-style 属性具有以下值：
- 没有任何
- 隐
- 点缀
- 虚线
- 坚硬的
- 双倍的
- 槽
- 岭
- 插图
- 一开始
添加了一些属性扩展，例如 -webkit- 适用于 Safari、Google Chrome 和 Opera（较新版本），-moz- 适用于 Firefox，-o- 适用于旧版本的 Opera 等。
| 初始值 | 没有人 |
|---|---|
| 应用于 | 多色元素。 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS3 |
| DOM 语法 | object.style.columnRuleStyle=“虚线”； |
日期：2020-06-02 22:14:22 来源：oir作者：oir