CSS column-rule 属性值说明
| 值 | 说明 |
|---|---|
| column-rule-width | 定义列之间的宽度。默认值为“medium”。 |
| column-rule-style | 定义列之间规则的样式。默认值为“none”。 |
| column-rule-color | 设置规则的颜色。默认值是元素的当前颜色。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
column-rule 属性规定了列与列之间的直线,也称“规则”。
column-rule 是定义列之间规则的样式、宽度和颜色的速记属性。
它由以下属性指定：
- column-rule-style
- column-rule-width
- column-rule-color
如果未设置 column-rule-color 属性，则将应用文本的颜色。
与其他速记属性一样，如果未指定值，则将其设置为其初始值。
column-rule 属性是 CSS3 属性之一。
添加了一些属性扩展，例如 -webkit- 适用于 Safari、Google Chrome 和 Opera（较新版本），-moz- 适用于 Firefox，-o- 适用于旧版本的 Opera 等。
| 初始值 | medium none 当前颜色 |
|---|---|
| 应用于 | table列规则 |
| 继承 | 无效 |
| 可动画的 | 列规则的颜色和宽度可以设置动画。 |
| 版本 | CSS3 |
| DOM 语法 | object.style.columnRule=“5px开始#ccc”； |
语法
column-rule: column-rule-width column-rule-style column-rule-color | initial | inherit;
列规则属性示例：
<!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: 5px dotted #ccc;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 30px;
-moz-column-rule: 5px dotted #ccc;
column-count: 3;
column-gap: 30px;
column-rule: 5px dotted #ccc;
}
</style>
</head>
<body>
<h1>Column-rule-style example</h1>
<p>列规则设置为5px灰色点线。</p>
<div>
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
生活终归还得继续。
把痛苦停在昨天 把微笑留给明天。
你要多学点东西，你要多看会书，你要多运行些步，时间慢慢流，你想有一个更好的未来，那么从现在开始，你要，好好努力。
</div>
</body>
</html>
结果
我们只能定义一个值，它仍然有效。
具有一个值的列规则属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
-webkit-column-count: 3;
-webkit-column-gap: 30px;
-webkit-column-rule: dashed;
-moz-column-count: 3;
-moz-column-gap: 30px;
-moz-column-rule: dashed;
column-count: 3;
column-gap: 30px;
column-rule: dashed;
}
</style>
</head>
<body>
<h2>Column-rule-style example</h2>
<p>将列规则设置为： "dashed".</p>
<div>
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
生活终归还得继续。
把痛苦停在昨天 把微笑留给明天。
你要多学点东西，你要多看会书，你要多运行些步，时间慢慢流，你想有一个更好的未来，那么从现在开始，你要，好好努力。
</div>
</body>
</html>
在这个例子中，规则的宽度是 10px，样式是“groove”，颜色是灰色。
具有指定宽度、样式和颜色的列规则属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
/* Chrome, Safari, Opera */
-webkit-column-count: 4;
-webkit-column-gap: 30px;
-webkit-column-rule: 10px groove #ccc;
/* Firefox */
-moz-column-count: 4;
-moz-column-gap: 30px;
-moz-column-rule: 10px groove #ccc;
column-count: 4;
column-gap: 30px;
column-rule: 10px groove #ccc;
}
</style>
</head>
<body>
<h2>Column-rule-style example</h2>
<p>将column-rule设置为10px灰色深沟</p>
<div>
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
生活终归还得继续。
把痛苦停在昨天 把微笑留给明天。
你要多学点东西，你要多看会书，你要多运行些步，时间慢慢流，你想有一个更好的未来，那么从现在开始，你要，好好努力。
</div>
</body>
</html>
日期：2020-06-02 22:14:22 来源：oir作者：oir