本文摘自PHP中文网,作者silencement,侵删。
css column-rule-width属性定义及用法
在css中,column-rule-width属性是用在多列布局元素中,用来设置列与列之间分割线的宽度。通常与column-count、column-rule-style等多列布局属性一起使用,使用它的前提条件是,通过column-count、column等属性定义了多列布局,并且设置了列与列之间的分割样式(如:column-rule-style属性定义了分割线),单独使用column-rule-width属性是没有效果的;
css column-rule-width属性语法格式
css语法:column-rule-width: thin / medium / thick / length;(例:column-rule-width: 16px;)
JavaScript语法:object.style.columnRuleWidth="18px"
css column-rule-width属性值说明
thin:细的分隔线
medium:中等的分隔线
thick :粗的分隔线
length:自定义宽度的分隔线(如:12px)
实例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" />
<title>css 3 column-rule-width属性设置列之间分割线的宽度笔记</title>
<style type= "text/css" >
body{ background : #ddd ;}div{ width : 400px ; border : 1px solid blueviolet; margin-top : 10px ;: ;}
. thin {column-count: 3 ;column-rule-style: solid ;column-rule- width : thin ;}
. thick {column-count: 3 ;column-rule-style: solid ;column-rule- width : thick ;}
.length{column-count: 3 ;column-rule-style: solid ;column-rule- width : 8px ;}
</style>
</head>
<body>
<div class= "thin" >column-rule- width : thin ;演示,设置细分割线。这是为了演示效果多写的</div>
<div class= "thick" >column-rule- width : thick ;演示,设置粗分割线。这是为了演示效果多写的</div>
<div class= "length" >column-rule- width : 8px ;,设置分割线的宽度为 8px 。这是为了演示效果多写的</div>
</body>
</html>
|
运行结果
以上就是css column-rule-width属性怎么用的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css如何修改滚动条箭头样式
none在css中表示什么意思
css中伪类和伪元素有什么区别
css border-top-width属性怎么用
css中的url是什么意思
css如何设置边框
input实现文字超出省略号(代码示例)
css如何使用伪元素
css border-left属性怎么用
深入浅析css text-emphasis属性,看看它的用法!
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css column-rule-width属性怎么用