59. CSS3 列表边框之column-rule属性
目录
column-rule
主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说,就有点类似于常用的border
属性。但column-rule
是不占用任何空间位置的,在列与列之间改变其宽度不会改变任何列的位置。
语法规则:
column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>
取值说明:
属性值 | 属性值说明 |
column-rule-width |
类似于border-width 属性,主要用来定义列边框的宽度,其默认值为“medium”,column-rule-width 属性接受任意浮点数,但不接收负值。但也像border-width 属性一样,可以使用关键词:medium、thick 和 thin。 |
column-rule-style |
类似于border-style 属性,主要用来定义列边框样式,其默认值为“none”。column-rule-style 属性值与border-style 属值相同,包括 none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。 |
column-rule-color |
类似于border-color 属性,主要用来定义列边框颜色,其默认值为前景色color 的值,使用时相当于border-color 。column-rule-color 接受所有的颜色。如果不希望显示颜色,也可以将其设置为transparent (透明色) |
例如:为了能有效区分栏目列之间的关系,可以为其设置一个列边框,代码为:
column-rule: 2px dotted green;
实例演示:
为栏目列设置一个 3px 的灰色实体边框线。注意浏览器的兼容性
HTML 代码:
<div class="columns"> <h2>我要分列显示</h2> <p>为了能在 Web 页面中方便实现类似报纸、杂志那种多列排版的布局,W3C 特意给 CSS3 增加了一个多列布局模块(CSS Multi Column Layout Module)。它主要应用在文本的多列布局方面。对于文本的多列布局,我想大家并不陌生,因为报纸和杂志上我们随处可见,这种布局在报纸和杂志上都使用了几十年了,但需要在 Web 页面上实现文本的多列布局,正如下图所示。</p> <p>为了能在 Web 页面中方便实现类似报纸、杂志那种多列排版的布局,W3C 特意给 CSS3 增加了一个多列布局模块(CSS Multi Column Layout Module)。它主要应用在文本的多列布局方面。对于文本的多列布局,我想大家并不陌生,因为报纸和杂志上我们随处可见,这种布局在报纸和杂志上都使用了几十年了,但需要在 Web 页面上实现文本的多列布局,正如下图所示。</p> <p>为了能在 Web 页面中方便实现类似报纸、杂志那种多列排版的布局,W3C 特意给 CSS3 增加了一个多列布局模块(CSS Multi Column Layout Module)。它主要应用在文本的多列布局方面。对于文本的多列布局,我想大家并不陌生,因为报纸和杂志上我们随处可见,这种布局在报纸和杂志上都使用了几十年了,但需要在 Web 页面上实现文本的多列布局,正如下图所示。</p> </div>
CSS 代码:
.columns { padding: 5px; border: 1px solid green; width: 900px; margin: 60px 0 20px 0; -webkit-column-count:3; -moz-column-count:3; -o-column-count:3; -ms-column-count:3; column-count:3; -webkit-column-gap: 2em; -moz-column-gap: 2em; -o-column-gap: 2em; -ms-column-gap: 2em; column-gap: 2em; -webkit-column-rule:2px dotted green; -moz-column-rule:2px dotted green; -o-column-rule:2px dotted green; -ms-column-rule:2px dotted green; column-rule:2px dotted green; }
效果如下:
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 59. CSS3 列表边框之column-rule属性
码云笔记 » 59. CSS3 列表边框之column-rule属性