column-rule

**column-rule** 简写 CSS 属性设置在多列布局中列之间绘制的线的宽度、样式和颜色。

试一试

组成属性

此属性是以下 CSS 属性的简写

语法

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

/* Global values */
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> 值。

正式定义

初始值作为简写属性的每个属性
应用于多列元素
继承否
计算值作为简写属性的每个属性
动画类型作为简写属性的每个属性

正式语法

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

<column-rule-width> = 
  <line-width>  

<column-rule-style> = 
  <line-style>  

<column-rule-color> = 
  <color>  

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

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

示例

示例 1

css
/* Same as "medium dotted currentcolor" */
p.foo {
  column-rule: dotted;
}

/* Same as "medium solid blue" */
p.bar {
  column-rule: solid blue;
}

/* Same as "8px solid currentcolor" */
p.baz {
  column-rule: solid 8px;
}

p.abc {
  column-rule: thick inset blue;
}

示例 2

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;
}

结果

规范

规范
CSS 多列布局模块级别 1
# column-rule

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅