首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

列规则 | column-rule

在多列布局中,column-ruleCSS属性指定要在每列之间绘制的直线或“规则”。

代码语言:javascript
复制
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-widthcolumn-rule-stylecolumn-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
代码语言:txt
复制
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-stylenonehidden
代码语言:txt
复制
Animation type as each of the properties of the shorthand:
  • column-rule-color*a颜色
  • column-rule-style*离散
  • column-rule-width*a长度
代码语言:txt
复制
Canonical order per grammar  

语法

一个,两个或三个下面列出的值,以任何顺序:

<'column-rule-width'><length>三个关键词或一个thinmediumthick。见border-width细节。

<'column-rule-style'>请参阅border-style可能的值和细节。

<'column-rule-color'>是一个<color>价值。

形式语法

代码语言:javascript
复制
<'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>

实例

例1

代码语言:javascript
复制
/* 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内容

代码语言:javascript
复制
<div id="col_rul">?
  <p> column one </p>
  <p> column two </p>
  <p> column three </p>
</div>

CSS内容

代码语言:javascript
复制
#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

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com