Home >Web Front-end >CSS Tutorial >How to use css column-rule-width attribute
How to use css column-rule-width attribute
- silencementOriginal
- 2019-05-27 16:47:183319browse
css column-rule-width attribute definition and usage
In css, the column-rule-width attribute is used in multi-column layout element, used to set the width of the dividing line between columns. It is usually used together with multi-column layout attributes such as column-count and column-rule-style. The prerequisite for using it is that the multi-column layout is defined through attributes such as column-count and column, and the division between columns is set. Style (for example: the column-rule-style attribute defines the dividing line), using the column-rule-width attribute alone has no effect;
css column-rule-width attribute syntax format
css syntax: column-rule-width: thin / medium / thick / length; (Example: column-rule-width: 16px;)
JavaScript syntax: object.style.columnRuleWidth= "18px"
css column-rule-width attribute value description
thin: thin dividing line
medium: medium dividing line
thick: Thick separator line
length: Custom width separator line (eg: 12px)
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 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>operation result
The above is the detailed content of How to use css column-rule-width attribute. For more information, please follow other related articles on the PHP Chinese website!