CSS - column-rule-width 属性

CSS column-rule-width 属性设置在多列布局中列之间绘制的线条的宽度。必须声明 column-rule-style 才能使用此属性。

语法

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

属性值

值	描述
medium	它设置中等宽度的规则。默认值。
thin	它设置细宽度规则。
thick	它设置粗宽度规则。
length	规则的厚度可以以值的格式给出。
initial	这将属性设置为其默认值。
inherit	这从父元素继承属性。

CSS 列规则宽度属性示例

以下示例说明了使用不同值的 column-rule-width 属性。

使用中等值的列规则宽度属性

要将中等宽度设置为规则，我们使用 medium 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .multicol-col-rule {
         column-count: 3;
         column-gap: 40px;
         column-rule-width: medium;
         column-rule-style: solid;

      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-width property
   </h2>
   <p>
      column-rule-width: medium value
   </p>
   <div class="multicol-col-rule ">
      TutorialsPoint is a versatile online educational 
      platform offering free tutorials across various fields
      such as programming, web development, data science, and
      more. It features a wealth of resources including
      step-by-step guides, practical examples, and interactive
      tools designed to facilitate learning for beginners and
      advanced users. The platform also provides coding practice
      exercises, quizzes, and detailed explanations to
      reinforce understanding. With its user-friendly
      interface and diverse content, TutorialsPoint is a
      valuable resource for anyone looking to expand their
      knowledge and skills.
   </div><br/>

</body>

</html>

使用细值的列规则宽度属性

要将细宽度设置为规则，我们使用 thin 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .multicol-col-rule {
         column-count: 3;
         column-gap: 40px;
         column-rule-width: thin;
         column-rule-style: solid;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-width property
   </h2>
   <p>
      column-rule-width: thin value
   </p>
   <div class="multicol-col-rule ">
      TutorialsPoint is a versatile online educational 
      platform offering free tutorials across various fields
      such as programming, web development, data science, and
      more. It features a wealth of resources including
      step-by-step guides, practical examples, and interactive
      tools designed to facilitate learning for beginners and
      advanced users. The platform also provides coding practice
      exercises, quizzes, and detailed explanations to
      reinforce understanding. With its user-friendly
      interface and diverse content, TutorialsPoint is a
      valuable resource for anyone looking to expand their
      knowledge and skills.
   </div><br/>

</body>

</html>

使用粗值的列规则宽度属性

要将粗宽度设置为规则，我们使用 thick 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .multicol-col-rule {
         column-count: 3;
         column-gap: 40px;
         column-rule-width: thick;
         column-rule-style: solid;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-width property
   </h2>
   <p>
      column-rule-width: thick value
   </p>
   <div class="multicol-col-rule ">
      TutorialsPoint is a versatile online educational 
      platform offering free tutorials across various fields
      such as programming, web development, data science, and
      more. It features a wealth of resources including
      step-by-step guides, practical examples, and interactive
      tools designed to facilitate learning for beginners and
      advanced users. The platform also provides coding practice
      exercises, quizzes, and detailed explanations to
      reinforce understanding. With its user-friendly
      interface and diverse content, TutorialsPoint is a
      valuable resource for anyone looking to expand their
      knowledge and skills.
   </div><br/>

</body>

</html>

使用长度值的列规则宽度属性

要根据我们的选择定义规则的厚度，我们可以用长度值指定厚度（例如 10px、20px 等）。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .multicol-col-rule {
         column-count: 3;
         column-gap: 40px;
         column-rule-width: 10px;
         column-rule-style: solid;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-width property
   </h2>
   <p>
      column-rule-width: 10px 
   </p>
   <div class="multicol-col-rule ">
      TutorialsPoint is a versatile online educational 
      platform offering free tutorials across various fields
      such as programming, web development, data science, and
      more. It features a wealth of resources including
      step-by-step guides, practical examples, and interactive
      tools designed to facilitate learning for beginners and
      advanced users. The platform also provides coding practice
      exercises, quizzes, and detailed explanations to
      reinforce understanding. With its user-friendly
      interface and diverse content, TutorialsPoint is a
      valuable resource for anyone looking to expand their
      knowledge and skills.
   </div><br/>

</body>

</html>

支持的浏览器

属性
column-rule-width	50.0	10.0	52.0	9.0	37.0

css_properties_reference.htm

打印页面