column-rule-style

Avatar of Geoff Graham
Geoff Graham

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;

演示

浏览器支持

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

规范

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