HTML | DOM 样式 columnRule 属性

介绍

columnRule 属性设置分栏之间的分隔线。

实际效果依赖于 columnCount 或 columnWidth 的值。

语法

<style>
    div {
        column-count: 3; /* 设置为多少栏就有多少栏 */
        column-rule: 2px solid black; /* 设置分隔线，2px 黑色实线 */
    }
</style>

<div>
    <p>苏轼《江城子·密州出猎》</p>
    <p>老夫聊发少年狂，左牵黄，右擎苍，锦帽貂裘，千骑卷平冈。</p>
    <p>为报倾城随太守，亲射虎，看孙郎。</p>
    <p>酒酣胸胆尚开张，鬓微霜，又何妨！</p>
    <p>持节云中，何日遣冯唐？</p>
    <p>会挽雕弓如满月，西北望，射天狼。</p>
    <p>天生我材必有用，千金散尽还复来。</p>
    <p>烹羊宰牛且为乐，会须一饮三百杯。</p>
    <p><em>战場原詩：</em></p>
    <p><em>塞上猎，往来种田人。</em></p>
    <p><em>红旗半卷出郊村，夜雨疏钟漏永昼。</em></p>
    <p><em>孤馆闭门独鹤，出旗换马齐蹄。</em></p>
</div>

值

• column-rule-style - 指定分隔线的样式，默认是 none。
• column-rule-width - 指定分隔线的宽度，默认是 medium。
• column-rule-color - 指定分隔线的颜色，默认是和文字颜色相同。

其他备注

如果 columnCount（W3C 推荐）和 columnWidth 属性（IE10+）都设置了，其实会以 columnWidth 方式来对元素进行分栏，而且这个时候并不会在分隔线的两侧产生多余的宽度。这种情况下，只有当元素实际比域窄时才会撑开元素宽度。

总结

columnRule 属性用于设置分栏之间的分隔线，可指定样式、宽度和颜色。