语法
column-rule-color: color | initial | inherit;
column-rule-color 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 20px;
-webkit-column-rule-style: dashed;
-webkit-column-rule-color: lightgreen;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 20px;
-moz-column-rule-style: dashed;
-moz-column-rule-color: lightgreen;
column-count: 3;
column-gap: 20px;
column-rule-style: dashed;
column-rule-color: lightgreen;
}
</style>
</head>
<body>
<h1>The column-rule-color example</h1>
<div>
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
生活终归还得继续。
把痛苦停在昨天 把微笑留给明天
</div>
</body>
</html>
我们可以将十六进制、RGB、RGBA、HSL、HSLA 或者颜色名称设置为 column-rule-color 属性的值。
具有“十六进制”值的 column-rule-color 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 40px;
-webkit-column-rule-style: solid;
-webkit-column-rule-color: #8ebf42;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 40px;
-moz-column-rule-style: solid;
-moz-column-rule-color: #8ebf42;
column-count: 3;
column-gap: 40px;
column-rule-style: solid;
column-rule-color: #8ebf42;
}
</style>
</head>
<body>
<h1>The column-rule-color example</h1>
<div>
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
生活终归还得继续。
把痛苦停在昨天 把微笑留给明天
</div>
</body>
</html>
具有“RGB”值的 column-rule-color 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 40px;
-webkit-column-rule-style: double;
-webkit-column-rule-color: rgb(234, 211, 21);
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 40px;
-moz-column-rule-style: double;
-moz-column-rule-color: rgb(234, 211, 21);
column-count: 3;
column-gap: 40px;
column-rule-style: double;
column-rule-color: rgb(234, 211, 21);
}
</style>
</head>
<body>
<h1>The column-rule-color example</h1>
<div>
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
生活终归还得继续。
把痛苦停在昨天 把微笑留给明天
</div>
</body>
</html>
具有“HSL”值的 column-rule-color 属性示例：
<!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: solid;
-webkit-column-rule-color: hsl(351, 97%, 57%);
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 30px;
-moz-column-rule-style: solid;
-moz-column-rule-color: hsl(351, 97%, 57%);
column-count: 3;
column-gap: 30px;
column-rule-style: solid;
column-rule-color: hsl(351, 97%, 57%);
}
</style>
</head>
<body>
<h1>The column-rule-color example</h1>
<div>
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
生活终归还得继续。
把痛苦停在昨天 把微笑留给明天
</div>
</body>
</html>
column-rule-color 属性设置规则的颜色。
column-rule-color 属性是 CSS3 属性之一。
规则的颜色也可以由 column-rule 速记属性指定。
我们可以在我们的 HTML 颜色部分找到网络颜色，并尝试使用我们的颜色选择器工具选择我们喜欢的颜色。
| 初始值 | 当前颜色 |
|---|---|
| 应用于 | 多色元素。 |
| 继承 | 无效 |
| 可动画的 | 规则的颜色是可设置动画的。 |
| 版本 | CSS3 |
| DOM 语法 | object.style.columnRuleColor=“#666”； |
CSS column-rule-color 属性值说明
| 值 | 说明 |
|---|---|
| color | 设置规则的颜色。可以使用颜色名称、十六进制颜色代码、rgb（）、rgba（）、hsl（）、hsla（）。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
日期：2020-06-02 22:14:22 来源：oir作者：oir