59. CSS3 列表边框之column-rule属性

目录
文章目录隐藏
  1. 语法规则:
  2. 取值说明:
  3. 实例演示:

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-colorcolumn-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;
}

效果如下:

CSS3 列表边框之 column-rule 属性

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 59. CSS3 列表边框之column-rule属性

发表回复