CSS

列表边框column-rule

字号+ 编辑: Snake 修订: Snake 来源: 慕课网 2021-04-22 16:21 我要说两句(0)

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

5、列表边框column-rule

column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。有点类似于常用的border属性。

但column-rule是不占用任何空间位置的,在列与列之间改变其宽度不会改变任何列的位置。

语法规则:

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

取值说明:

属性值属性值说明
column-rule-width

类似于border-width属性,主要用来定义列边框的宽度,其默认值为“medium”,column-rule-width属性接受任意浮点数,但不接收负值。但也像border-width属性一样,可以使用关键词:medium、thick、thin

column-rule-stylel类似于border-style属性,主要用来定义列边框样式,其默认值为“none”。column-rule-style属性值与border-style属性值相同,包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。
column-rule-color类似于border-color属性,主要用来定义列边框颜色,其默认值为前景色color的值,使用时相当于border-color。column-tule-color接受所有的颜色。如果不希望显示颜色,也可以将其设置为transparent(透明色)。

例如:为了能有效区分栏目列之间的关系,可以为其设置一个列边框。

代码为:

column-rule: 2px dotted green;

实例代码:

.columns{
padding:5px;
border:1px solid green;
width:900px;
margin:20px;
-webkit-column-count:3;
-mozt-column-count:3;
-o-column-count:3;
-mst-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:3px solid gray;
-moz-column-rule:3px solid gray;
-o-column-rule:3px solid gray;
-ms-column-rule:3px solid gray;
column-rule:3px solid gray;
}

阅完此文,您的感想如何?
  • 鼓掌

    0

  • 鄙视

    0

  • 开心

    0

  • 愤怒

    0

  • 可怜

    0

1.如文章侵犯了您的版权,请发邮件通知本站,该文章将在24小时内删除;
2.本站标注原创的文章,转发时烦请注明来源;
3.交流群: PHP+JS聊天群

相关课文
  • 引入字体文件时报错: OTS parsing error: invalid version tag

  • CSS的边框逐渐发亮效果怎么做的

  • CSS的几个核心概念

  • CSS函数的8个妙用

我要说说
网上宾友点评
沙发已空
列表边框column-rule