列规则风格 | column-rule-style

column-rule-style

通过column-rule-styleCSS属性，可以设置在多列布局的列之间绘制的规则的样式。

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;

初始值	没有
适用于	多元元素
遗传	没有
媒体	visual
计算值	作为指定
动画类型	离散的
规范的顺序	逐个语法

语法

单一的<br-style>价值。

值

是通过border-style描述规则的样式来定义的关键字。样式必须解释为在折叠边框模型中。

形式语法

<'border-style'>

例

#header {
  -moz-column-count: 3;
  -moz-column-gap: 40px;
  -moz-column-rule-style: solid;
}

<div id="header">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Mauris sit amet maximus quam. Fusce tempor metus turpis, sit amet bibendum purus tincidunt sit amet. 
    Etiam pretium tempus nibh id pharetra. Nullam ut fermentum est. Integer ut convallis eros, sed laoreet dui. 
    Quisque semper eget tortor ac tempor. Vestibulum quis risus ac ex ultricies vehicula. 
    Duis placerat elementum lectus, id vulputate urna placerat vel. Ut tincidunt sit amet velit sed imperdiet. 
    Duis et urna et sem ultricies rhoncus fermentum vitae est.
</div>

规范

Specification	Status	Comment
CSS Multi-column Layout ModuleThe definition of 'column-rule-style' in that specification.	Candidate Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	(Yes)-webkit 50.01	(Yes)	3.5 (1.9.1)-moz 52.0 (52.0)2	10	11.10	3.0 (522)-webkit
Unprefixed		(Yes)

Feature	Android	Android Webview	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile	Chrome for Android
Basic support	?	? 50.01	(Yes)	(Yes) 52.0 (52.0)2	?	?	?	? 50.01
Unprefixed	No support		(Yes)