列规则风格 | 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) | ? | ? | ? | ? | ? |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
