HTML | DOM 样式 columnRuleWidth 属性(1)

📌 相关文章

📜 HTML | DOM 样式 columnRuleWidth 属性(1)

📅 最后修改于: 2023-12-03 15:15:36.615000 🧑 作者: Mango

HTML | DOM 样式 columnRuleWidth 属性

简介

columnRuleWidth 属性用于控制多列布局中的垂直线的宽度。该属性仅适用于具有多列属性的元素。

语法

column-rule-width: medium|thin|thick|length|initial|inherit;

属性值

medium：默认值，定义中等宽度的边框。
thin：定义细边框。
thick：定义粗边框。
length：定义具体的边框宽度，单位可以是px、em等等。
initial：设为默认值。
inherit：从父元素继承属性。

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>columnRuleWidth 属性示例</title>
    <style type="text/css">
        .multi-column {
            -webkit-column-count: 3; /* Chrome, Safari, Opera */
            -moz-column-count: 3; /* Firefox */
            column-count: 3;
            -webkit-column-rule-style: solid;
            -moz-column-rule-style: solid;
            column-rule-style: solid;
            -webkit-column-rule-width: 3px;
            -moz-column-rule-width: 3px;
            column-rule-width: 3px;
        }
    </style>
</head>
<body>
    <div class="multi-column">
      <p>第一列的文本</p>
      <p>第二列的文本</p>
      <p>第三列的文本</p>
      <p>第四列的文本</p>
      <p>第五列的文本</p>
      <p>第六列的文本</p>
      <p>第七列的文本</p>
      <p>第八列的文本</p>
      <p>第九列的文本</p>
      <p>第十列的文本</p>
    </div>
</body>
</html>

解释

在上面的示例中，我们定义了一个带有三列布局样式的div容器，并通过column-rule-width属性定义了垂直线的3像素的宽度。您还可以定义其他的像素值或单位来自定义边框的宽度。