好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

column-rule

CSS column-rule属性用于在多列布局的列与列之间绘制一条分隔线。

CSS column-rule 属性是各种 column-rule-* 属性的简写方式。

多列布局中,列与列之间的分割线可以通过属性来设置宽度,通过属性来设置颜色,通过属性来设置线条的样式。而 column-rule 属性可以同时设置分隔线的这三个属性。

分割线只会绘制在列与列之间,在第一列的前面和最后一列的后面是不会绘制分隔线的。

分隔线不会占用列与列之间的空间,也就是说,增加 column-rule-width 属性的值是不会影响由属性指定的列与列之间的间隙宽度。

官方语法
column-rule: <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>               
                            

参数:

<'column-rule-width'> :设置分隔线的宽度。详细内容参考属性的介绍。 <'column-rule-style'> :设置分隔线的线条样式。详细内容参考属性的介绍。 <'column-rule-color'> :设置分隔线的颜色。详细内容参考属性的介绍。

column-rule 属性的初始值为 0 solid currentColor 。

如果你只为 column-rule 属性设置了一个或两个值,那么没有设置的属性会使用它们各自的初始值作为值。

应用范围

column-rule 属性可以应用在所有多列布局的元素上。

示例代码

下面是 column-rule 属性的一些取值的示例代码:

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

column-rule: inherit;                            
                            
column-rule: 1em dotted #ddd;
/* 等效于 */
column-rule-width: 1em;
column-rule-style: dotted;
column-rule-color: #ddd;                              
                            
在线演示

下面是一个多列布局中使用 column-rule 属性来设置分隔线的例子:

CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道,当一行文字太长时,读者读起来就比较费劲,有可能读错行或读串行。

人们的视点从文本的一端移到另一端、然后换到下一行的行首,如果眼球移动浮动过大,他们的注意力就会减退,容易读不下去。所以,为了最大效率的使用大屏幕显示器,页面设计中需要限制文本的宽度,让文本按多列呈现,就像报纸上的新闻排版一样。

但是在CSS3的多列布局(columns)语法功能出现之前,人们如果想让文本呈多列显示,要么使用绝对定位,手动给文本分段落,或者使用JS脚本等,而新语法的出现,彻底改变了这样的局面。

浏览器支持

column-rule 属性的浏览器兼容性如下图所示:

IE10+和Edge浏览器以及Opera Mini浏览器支持 column-rule 属性。Firefox浏览器需要添加 -webkit- 前缀: -moz-column-rule ,Safari 和 Chrome浏览器需要添加 -webkit- 前缀: -webkit-column-rule 。

查看更多关于column-rule的详细内容...

  阅读:44次

上一篇: column-rule-style

下一篇:column-span

CopyRight:2016-2025好得很程序员自学网 备案ICP:湘ICP备09009000号-16 http://www.haodehen.cn
本站资讯不构成任何建议,仅限于个人分享,参考须谨慎!
本网站对有关资料所引致的错误、不确或遗漏,概不负任何法律责任。
本网站刊载的所有内容(包括但不仅限文字、图片、LOGO、音频、视频、软件、程序等)版权归原作者所有。任何单位或个人认为本网站中的内容可能涉嫌侵犯其知识产权或存在不实内容时,请及时通知本站,予以删除。

网站内容来源于网络分享,如有侵权发邮箱到:kenbest@126.com,收到邮件我们会即时下线处理。
网站框架支持:HDHCMS   51LA统计 百度统计
Copyright © 2018-2025 「好得很程序员自学网
[ SiteMap ]