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

列印頁面