Comment utiliser l'attribut CSS column-rule-width-tutoriel CSS-php.cn

Comment utiliser l'attribut CSS column-rule-width

silencement

Libérer： 2019-05-27 16:47:18

original

3322 Les gens l'ont consulté

Comment utiliser l'attribut CSS column-rule-width

Définition et utilisation de l'attribut CSS column-rule-width

En CSS, l'attribut column-rule-width est utilisé dans les formats multi-colonnes élément de mise en page, utilisé pour définir la largeur de la ligne de séparation entre les colonnes. Il est généralement utilisé avec des attributs de disposition multi-colonnes tels que le nombre de colonnes et le style de règle de colonne. La condition préalable à son utilisation est que la disposition multi-colonnes soit définie par des attributs tels que le nombre de colonnes et la division. entre les colonnes est défini (par exemple : l'attribut column-rule-style définit la ligne de séparation), l'utilisation de l'attribut column-rule-width seul n'a aucun effet

css column-rule- ; format de syntaxe de l'attribut width

syntaxe css : colonne-rule-width : fin / moyen / épais / longueur (Exemple : colonne-rule-width : 16px ;)

Syntaxe JavaScript ; : object.style.columnRuleWidth= "18px"

css column-rule-width valeur de l'attribut description

mince : fine ligne de démarcation

moyenne : ligne de séparation moyenne

épaisseur : ligne de séparation épaisse

longueur : ligne de séparation de largeur personnalisée (par exemple : 12 px)

Exemple

<!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>

Copier après la connexion

Exécuter les résultats

Comment utiliser lattribut CSS column-rule-width