CSS - column-rule 屬性

CSS column-rule 屬性是用於定義 column-rule-width、column-rule-style 和 column-rule-color 屬性值的簡寫屬性，這些屬性分別設定多列布局中列之間線條的寬度、樣式和顏色。

語法

column-rule: column-rule-width column-rule-style column-rule-color | initial | inherit;

屬性值

值	描述
column-rule-width	用於設定列間規則的寬度。預設值為 medium。
column-rule-style	用於設定列間規則的樣式。預設值為 none。
column-rule-color	用於設定列間規則的顏色。預設值為元素的顏色。
initial	將屬性設定為其預設值。
inherit	從父元素繼承屬性。

CSS Column Rule 屬性示例

以下示例說明了使用不同值的 column-rule 屬性。

定義 Column Rule 屬性的所有值

要在一個語句中定義規則的寬度、樣式和顏色，我們使用 column-rule 屬性。必須給出三個值。第一個值為寬度，第二個為樣式，第三個為顏色。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .multicol-col-rule {
         column-count: 3;
         column-gap: 40px;
         column-rule: 5px dashed green;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule property
   </h2>
   <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>
</body>

</html>

Column Rule 屬性的組成屬性

column-rule 屬性是屬性 column-rule-width、column-rule-style 和 column-rule-color 的組合。以下示例顯示瞭如何將這些屬性一起使用以顯示 column-rule 屬性效果。

示例

<!DOCTYPE html>
<html>

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

<body>
   <h2>
      CSS column-rule property
   </h2>
   <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>
</body>

</html>

支援的瀏覽器

屬性
column-rule	50.0	10.0	52.0	9.0	37.0

css_properties_reference.htm

列印頁面