column-rule

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

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

尝试一下

简写属性使用简单方便的声明形式将各个 column-rule-* 属性放在了一起:column-rule-widthcolumn-rule-stylecolumn-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> 或是 thinmediumthick 关键字的其中一个。请参阅 border-width

<'column-rule-style'>

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

<'column-rule-color'>

一个 <color> 值。

形式定义

初始值该简写所对应的每个属性:
适用元素multicol elements
是否是继承属性
计算值该简写所对应的每个属性:
动画类型该简写所对应的每个属性:

形式语法

column-rule = 
<gap-rule-list> |
<auto-gap-rule-list>

<gap-rule-list> =
<gap-rule-or-repeat> [ / <gap-rule-or-repeat> ]*

<auto-gap-rule-list> =
[ [ <gap-rule-or-repeat> ] / ]* <auto-repeat-gap-rule> [ / [ <gap-rule-or-repeat> ] ]*

<gap-rule-or-repeat> =
<gap-rule> |
<repeat-gap-rule>

<auto-repeat-gap-rule> =
repeat( auto , [ <gap-rule> ]# )

<gap-rule> =
<line-width> ||
<line-style> ||
<color>

<repeat-gap-rule> =
repeat( [ <integer [1,∞]> ] , [ <gap-rule> ]# )

<line-width> =
<length [0,∞]> |
thin |
medium |
thick

<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset

示例

示例一

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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
column-rule

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见