目录

CSS column-rule-style 属性

❮上一节完整的CSS参考下一节❯

示例

指定列之间规则的样式：

div {
column-rule-style: dotted;
}

亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个column-rule-style属性指定列之间规则的样式。

展示演示❯

默认值：	没有任何
遗传：	不
可动画：	不。阅读可动画的
版本：	CSS3
JavaScript 语法：	对象.style.columnRuleStyle="dotted"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

后跟 -webkit- 或 -moz- 的数字指定使用前缀的第一个版本。

Property
column-rule-style	50.0 4.0 -webkit-	10.0	52.0 2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit 11.1

CSS 语法

column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

属性值

Value	Description	Demo
none	Default value. Defines no rule	Demo ❯
hidden	Defines a hidden rule	Demo ❯
dotted	Defines a dotted rule	Demo ❯
dashed	Defines a dashed rule	Demo ❯
solid	Defines a solid rule	Demo ❯
double	Defines a double rule	Demo ❯
groove	Specifies a 3D grooved rule. The effect depends on the width and color values	Demo ❯
ridge	Specifies a 3D ridged rule. The effect depends on the width and color values	Demo ❯
inset	Specifies a 3D inset rule. The effect depends on the width and color values	Demo ❯
outset	Specifies a 3D outset rule. The effect depends on the width and color values	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

更多示例

示例

将 <div> 元素中的文本分为三列：

div {
column-count: 3;
}

亲自试一试 »

示例

指定列之间的间隙为 40 像素：

div {
column-gap: 40px;
}

亲自试一试 »

示例

指定列之间规则的宽度、样式和颜色：

div {
column-rule: 4px double #ff00ff;
}

亲自试一试 »

相关页面

CSS教程：CSS 多列

HTML DOM 参考：ColumnRuleStyle 属性

❮上一节完整的CSS参考下一节❯