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-width
、column-rule-style
和 column-rule-color
结合起来。
.columns {
columns: 2 600px;
column-rule: dotted 3px #f8a100;
}
语法
column-rule-width: thin | medium | thick | <length>
- 初始值:
medium
- 应用于: 多列容器
- 继承: 否
- 计算值: 绝对长度;如果
column-rule-style
为none
或hidden
,则为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;
演示
浏览器支持
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
10+ | 12+ | 3.5+ | 4+ | 3.1+ | 11.5+ |
Android Chrome | Android Firefox | Android 浏览器 | iOS Safari | Opera Mini |
---|---|---|---|---|
85+ | 79+ | 否 | 3.2+ | 全部 |
相关属性
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-span
column-width
columns
规范
CSS 多列布局模块级别 1 (编辑草案)