CSS3 column-rule-style 属性

最新推荐文章于 2023-09-10 09:05:31 发布

weixin_30518397

最新推荐文章于 2023-09-10 09:05:31 发布

阅读量248

点赞数

原文链接：http://www.cnblogs.com/xiangjuhua/p/5642568.html

版权

本文详细介绍了CSS中的column-rule-style属性，该属性用于在多列布局中定义列之间的分隔线样式。包括可用的样式选项如solid、dotted等，并提供了应用此属性的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS column-rule-style属性用于在多列布局中指定列与列之间通过column rule属性设置的分隔线的样式。column-rule是列与列之间的一条垂直分隔线，你可以使用column-rule-width属性来设置分隔线的宽度，使用column-rule-color属性来设置分隔线的颜色，使用column-rule-style属性来设置分隔线的线条样式。

.浏览器支持

.语法

　column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

.参数

none：不显示列与列之间的分隔线。设置的分隔线宽度和颜色属性会被忽略。
hidden：不显示列与列之间的分隔线。设置的分隔线宽度和颜色属性会被忽略。
dotted：列之间的分隔线显示为圆角的矩形。圆角的半径等于分隔线宽度的一半。
dashed：列之间的分隔线显示为直角矩形组成的虚线。
solid：列之间的分隔线显示为一条笔直的直线。
double：列之间的分隔线显示为两条直线，两条直线之间有一些间隙。两条直线的宽度和间隙宽度的总和等于column-rule-width属性指定的宽度。
groove：列之间的分隔线显示为内陷浮雕效果。
ridge：列之间的分隔线显示为外凸浮雕效果。
inset：列之间的分隔线显示为内斜面效果。
outset：列之间的分隔线显示为外斜面效果。

　 column-rule-style属性的初始值为none。

.应用范围

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

　　在一个元素应用column-rule-style属性的代码如下

 
         .columns { 
        
             columns: 12em; 
        
             column-rule-width: 5px; 
        
           　　 column-rule-style: solid; 
        
             column-rule-color: #0099CC; 
        
         }