column-rule-color
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.
column-rule-color
CSS 属性设置在多列布局中列与列之间绘制的线的颜色。
尝试一下
语法
CSS
/* <color> 值 */
column-rule-color: red;
column-rule-color: rgb(192 56 78);
column-rule-color: transparent;
column-rule-color: hsl(0 100% 50% / 60%);
/* 全局值 */
column-rule-color: inherit;
column-rule-color: initial;
column-rule-color: revert;
column-rule-color: revert-layer;
column-rule-color: unset;
column-rule-color
属性指定为单个 <color>
值。
取值
<color>
-
用于单独设置列之间分割线的颜色。
形式定义
形式语法
column-rule-color =
<line-color-list> |
<auto-line-color-list>
<line-color-list> =
[ <line-color-or-repeat> ]+
<auto-line-color-list> =
[ <line-color-or-repeat> ]* <auto-repeat-line-color> [ <line-color-or-repeat> ]*
<line-color-or-repeat> =
<color> |
<repeat-line-color>
<auto-repeat-line-color> =
repeat( auto , [ <color> ]+ )
<repeat-line-color> =
repeat( [ <integer [1,∞]> ] , [ <color> ]+ )
示例
设置列分割线为蓝色
HTML
html
<p>
这是分成三列的文本。用
<code>column-rule-color</code>
属性更改了列与列之间的线条颜色。你不觉得这很棒吗?
</p>
CSS
css
p {
column-count: 3;
column-rule-style: solid;
column-rule-color: blue;
}
结果
规范
Specification |
---|
CSS Multi-column Layout Module Level 1 # crc |
浏览器兼容性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
column-rule-color |
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.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.