CSS column-rule-width 属性值说明
| 值 | 说明 |
|---|---|
| medium | 规则是中等的。这是默认值。 |
| thick | 规则很严格。 |
| thin | 规则很简单。 |
| length | 指定宽度的规则。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
语法
column-rule-width: medium | thin | thick | length | initial | inherit;
column-rule-width 属性示例：
<!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: dotted;
-webkit-column-rule-color: #666;
-webkit-column-rule-width: thick;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 40px;
-moz-column-rule-style: dotted;
-moz-column-rule-color: #666;
-moz-column-rule-width: thick;
column-count: 3;
column-gap: 40px;
column-rule-style: dotted;
column-rule-color: #666;
column-rule-width: thick;
text-align: justify;
}
</style>
</head>
<body>
<h1>Column-rule-width 属性示例</h1>
<div>
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
生活终归还得继续。
把痛苦停在昨天 把微笑留给明天。
你要多学点东西，你要多看会书，你要多运行些步，时间慢慢流，你想有一个更好的未来，那么从现在开始，你要，好好努力。
</div>
</body>
</html>
具有 "thin" 值的 column-rule-width 属性示例：
<!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-width: thin;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 40px;
-moz-column-rule-style: solid;
-moz-column-rule-width: thin;
column-count: 3;
column-gap: 40px;
column-rule-style: solid;
column-rule-width: thin;
text-align: justify;
}
</style>
</head>
<body>
<h1>Column-rule-width 属性示例</h1>
<div>
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
生活终归还得继续。
把痛苦停在昨天 把微笑留给明天。
你要多学点东西，你要多看会书，你要多运行些步，时间慢慢流，你想有一个更好的未来，那么从现在开始，你要，好好努力。
</div>
</body>
</html>
指定为“15px”的 column-rule-width 属性示例：
<!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: groove;
-webkit-column-rule-color: #1c87c9;
-webkit-column-rule-width: 15px;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 40px;
-moz-column-rule-style: groove;
-moz-column-rule-color: #1c87c9;
-moz-column-rule-width: 15px;
column-count: 3;
column-gap: 40px;
column-rule-style: groove;
column-rule-color: #1c87c9;
column-rule-width: 15px;
text-align: justify;
}
</style>
</head>
<body>
<h1>Column-rule-width 属性示例</h1>
<div>
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
生活终归还得继续。
把痛苦停在昨天 把微笑留给明天。
你要多学点东西，你要多看会书，你要多运行些步，时间慢慢流，你想有一个更好的未来，那么从现在开始，你要，好好努力。
</div>
</body>
</html>
column-rule-width CSS 属性定义了列之间规则的宽度。
column-rule-width 属性是 CSS3 属性之一。
首先你应该定义列或者列规则样式属性，然后是列规则宽度属性。
一个元素必须有一些规则才能设置宽度。
此属性具有以下值：
- medium
- thick
- thin
- length
该规范没有定义每个关键字的确切厚度。
但是，它们始终遵循以下顺序：thin ≤ medium ≤ thick
| 初始值 | 中等的 |
|---|---|
| 应用于 | 多色元素。 |
| 继承 | 无效 |
| 可动画的 | 规则的宽度和颜色可以设置动画。 |
| 版本 | CSS3 |
| DOM 语法 | object.style.columnRuleWidth=“5px”； |
日期：2020-06-02 22:14:22 来源：oir作者：oir