• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • column-rule

    版本:CSS3

    在多列布局中,column-rule 属性规定了列与列之间的直线,也称“规则”。该简写可以避免单独设置各个 column-rule-*属性:column-rule-widthcolumn-rule-stylecolumn-rule-color

    示例

    column-rule: dotted;
    column-rule: solid blue;
    column-rule: solid 8px;
    column-rule: thick inset blue;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE10以上版本的浏览器都支持column-rule

    语法

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

    取值:

    • <column-rule-width>:设置或检索对象的列与列之间的边框厚度。
    • <column-rule-style>:设置或检索对象的列与列之间的边框样式。
    • <column-rule-color>:设置或检索对象的列与列之间的边框颜色。
    默认值作为速记的每个属性:
  • column-rule-width: medium
  • column-rule-style: none
  • column-rule-color: currentcolor
  • 适用于定义了多列的元素
    继承性
    动画性
    计算值看每个独立属性

    实例

    p.foo { column-rule: dotted; } /* same as "medium dotted currentcolor" */
    p.bar { column-rule: solid blue; } /* same as "medium solid blue" */
    p.baz { column-rule: solid 8px; } /* same as "8px solid currentcolor" */
    p.abc { column-rule: thick inset blue; }
    
    div
    {
    column-rule:3px outset #ff00ff;
    -moz-column-rule:3px outset #ff00ff;/*firefox*/
    -webkit-column-rule:3px outset #ff00ff;/*safari and chrome*/
    }
    

    例子

    <style>
    .content-box {
    	width:20%;
    	padding:20px;
    	border: 10px solid #000000;
    	column-count:3;
    	column-rule: 5px dotted blue;
    	-moz-column-rule: 5px dotted blue;/*firefox*/
    	-webkit-column-rule: 5px dotted blue;/*safari and chrome*/
    }
    .content-box .items
    {
    	border:1px solid #ff6633;
    	padding:10px;
    	height:100%;
    	overflow:hidden;
    }
    
    </style>
    
    <h3>效果:</h3>
    <div class="content-box">
    	<p class="items">第一列文字部分:内容内容内容内容内容内容</p>
    	<p class="items">第二列文字部分:内容内容内容内容内容内容</p>
    	<p class="items">第三列文字部分:内容内容内容内容内容内容</p>
    	<p class="items">第四列文字部分:内容内容内容内容内容内容</p>
    	<p class="items">第五列文字部分:内容内容内容内容内容内容</p>
    </div>
    

    效果:

    第一列文字部分:内容内容内容内容内容内容

    第二列文字部分:内容内容内容内容内容内容

    第三列文字部分:内容内容内容内容内容内容

    第四列文字部分:内容内容内容内容内容内容

    第五列文字部分:内容内容内容内容内容内容

    上篇:column-gap

    下篇:break-inside