column-rule

CSS column-rule 简写属性可以在多列布局中设定分割线的宽度、样式和颜色。

尝试一下

该简写属性使用简单方便的声明形式将各个 column-rule-* 属性放在了一起：column-rule-width、column-rule-style 和 column-rule-color。

备注： 和所有简写属性一样，任何没有指定的单独值会设置为相应初始值（可能会覆盖非简写属性设置的值）。

语法

css

column-rule: dotted;
column-rule: solid 8px;
column-rule: solid blue;
column-rule: thick inset blue;

/* 全局值 */
column-rule: inherit;
column-rule: initial;
column-rule: revert;
column-rule: revert-layer;
column-rule: unset;

取值

column-rule 属性可以按任何顺序指定为下面列出的一个、两个或三个值。

<'column-rule-width'>

定义为 <length> 或是 thin、medium、thick 关键字的其中一个。请参阅 border-width。

<'column-rule-style'>

请参阅 border-style 以获取可能的值和详细信息。

<'column-rule-color'>

一个 <color> 值。

形式定义

初始值as each of the properties of the shorthand:
适用元素multicol elements
是否是继承属性否
计算值as each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

形式语法

column-rule = 
  <'column-rule-width'>  ||
  <'column-rule-style'>  ||
  <'column-rule-color'>

示例

示例一

css

/* 与 "medium dotted currentcolor" 相同 */
p.foo {
  column-rule: dotted;
}
/* 与 "medium solid blue" 相同 */
p.bar {
  column-rule: solid blue;
}
/* 与 "8px solid currentcolor" 相同 */
p.baz {
  column-rule: solid 8px;
}
p.abc {
  column-rule: thick inset blue;
}

示例二

HTML

html

<p class="content-box">
  This is a bunch of text split into three columns. Take note of how the
  `column-rule` property is used to adjust the style, width, and color of the
  rule that appears between the columns.
</p>

CSS

css

.content-box {
  padding: 0.3em;
  background: #ff7;
  column-count: 3;
  column-rule: inset 2px #33f;
}

结果

规范

Specification
CSS Multi-column Layout Module Level 1
# column-rule

浏览器兼容性

BCD tables only load in the browser

参见