列规则 | column-rule
column-rule
在多列布局中,column-rule
CSS属性指定要在每列之间绘制的直线或“规则”。
column-rule: dotted;
column-rule: solid blue;
column-rule: solid 8px;
column-rule: thick inset blue;
/* Global values */
column-rule: inherit;
column-rule: initial;
column-rule: unset;
它是一种方便的简写,以避免设定每个单独的column-rule-*
单独属性:column-rule-width
,column-rule-style
和column-rule-color
。
初始值 | 作为简写的每个属性:column-rule-width:medium column-rule-style:none column-rule-color:currentcolor |
---|---|
适用于 | 多元醇元素 |
遗传 | 没有 |
媒体 | 视觉 |
计算值 | 作为简写的每个属性:column-rule-color:计算的颜色column-rule-style:指定的column-rule-width:绝对长度; 如果列规则样式为none或隐藏,则为0 |
动画类型 | 作为简写的每个属性:column-rule-color:一个颜色column-rule-style:discrete column-rule-width:一个长度 |
规范的顺序 | 每语法 |
column-rule-width
*medium
column-rule-style
*none
column-rule-color
*currentcolor
Applies to multicol elements [Inherited](inheritance) no Media visual [Computed value](computed_value) as each of the properties of the shorthand:
column-rule-color
*计算颜色
column-rule-style
*具体规定
column-rule-width
绝对长度;0
如果column-rule-style
是none
或hidden
Animation type as each of the properties of the shorthand:
column-rule-color
*a颜色
column-rule-style
*离散
column-rule-width
*a长度
Canonical order per grammar
语法
一个,两个或三个下面列出的值,以任何顺序:
值
<'column-rule-width'>是<length>三个关键词或一个thin,medium或thick。见border-width细节。
形式语法
<'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>
实例
例1
/* same as "medium dotted currentColor" */
p.foo { column-rule: dotted; }
/* same as "medium solid blue" */
p.bar { column-rule: solid blue; }
/* same as "8px solid currentColor" */
p.baz { column-rule: solid 8px; }
p.abc { column-rule: thick inset blue; }
例2
HTML内容
<div id="col_rul">
<p> column one </p>
<p> column two </p>
<p> column three </p>
</div>
CSS内容
#col_rul {
padding: 0.3em;
background: gold;
border: groove 2px gold;
column-rule: inset 2px gold;
column-count: 3;
}
结果
规范
Specification | Status | Comment |
---|---|---|
CSS Multi-column Layout ModuleThe definition of 'column-rule' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | (Yes)-webkit 50.01 | (Yes)-webkit | 3.5 (1.9.1)-moz 52.0 (52.0)2 | 10 | 11.10 | 3.0 (522)-webkit |
Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | ? | ? 50.01 | (Yes)-webkit | (Yes) 52.0 (52.0)2 | ? | ? | ? | ? 50.01 |