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

column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。

语法规则：

column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>

取值说明：

例如：为了能有效区分栏目列之间的关系，可以为其设置一个列边框，代码为：

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属性的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。