column-rule-width

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!

column-rule-width CSS 属性设置在 CSS 多列布局中由 column-rule-style 在列之间绘制的线条的粗细。

.columns {
  columns: 2 600px;
  column-rule-style: dotted;
  column-rule-width: 3px;
}

另一种方法是使用 column-rule 简写属性,它将 column-rule-widthcolumn-rule-stylecolumn-rule-color 结合起来。

.columns {
  columns: 2 600px;
  column-rule: dotted 3px #f8a100;
}

语法

column-rule-width: thin | medium | thick | <length>
  • 初始值: medium
  • 应用于: 多列容器
  • 继承:
  • 计算值: 绝对长度;如果 column-rule-stylenonehidden,则为 0
  • 动画类型: 按计算值类型

column-rule-width 采用单个命名、长度或全局值。

/* Named values */
column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;

/* Length values */
column-rule-width: 15px;
column-rule-width: 1.5rem;

/* Global values */
column-rule-width: inherit;
column-rule-width: initial;
column-rule-width: unset;

演示

浏览器支持

IEEdgeFirefoxChromeSafariOpera
10+12+3.5+4+3.1+11.5+
Android ChromeAndroid FirefoxAndroid 浏览器iOS SafariOpera Mini
85+79+3.2+全部
来源:caniuse

规范

CSS 多列布局模块级别 1 (编辑草案)