How to use css column-rule-width attribute-CSS Tutorial-php.cn

How to use css column-rule-width attribute

silencement

Release： 2019-05-27 16:47:18

Original

3320 people have browsed it

How to use css column-rule-width attribute

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>

Copy after login

operation result

How to use css column-rule-width attribute

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!