DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费积分!
column-rule-style
CSS 属性指定在 CSS 多列布局中列之间绘制的线条类型。
该属性本身有点局限。当我们声明它时,它将在 CSS 列之间绘制一条 1 像素宽、黑色的线。
.columns {
columns: 2 600px;
column-rule-style: solid;
}
当我们开始将 column-rule-style
与其他 column-rule-
属性结合使用时,情况会变得更有意思,包括 column-rule-width
(设置更粗的线条)和 column-rule-color
(更改颜色)。
.columns {
columns: 2 600px;
column-rule-style: solid;
column-rule-width: 3px;
column-rule-color: #f8a100;
}
或者,我们可以简单地使用 column-rule 简写属性,它在一个声明中组合了所有三个属性。
.columns {
columns: 2 600px;
column-rule: solid 3px #f8a100;
}
语法
column-rule-style: <'border-style'>;
- 初始值:
none
- 应用于:多列容器
- 继承:否
- 计算值:指定的关键字
- 动画类型:离散
值
column-rule-style
接受以下值
/* Keyword values */
column-rule-style: none;
column-rule-style: hidden;
column-rule-style: dotted;
column-rule-style: dashed;
column-rule-style: solid;
column-rule-style: double;
column-rule-style: groove;
column-rule-style: ridge;
column-rule-style: inset;
column-rule-style: outset;
/* Global values */
column-rule-style: inherit;
column-rule-style: initial;
column-rule-style: unset;
演示
浏览器支持
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
10+ | 12+ | 3.5+ | 4+ | 3.2+ | 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-width
column-span
column-width
columns
规范
CSS 多列布局模块级别 1(编辑草案)