CSS - column-rule-color 屬性

上一頁
下一頁

CSS column-rule-color 屬性設定多列布局中列之間繪製的線條的顏色。column-rule-style 必須宣告才能使用此屬性。

語法

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

屬性值

值 描述
color 它指定規則的顏色。可以使用不同的顏色格式（名稱、rgb 值、十六進位制值、hsl 值等）。
initial 這將屬性設定為其預設值。
inherit 這從父元素繼承屬性。

CSS 列規則顏色屬性示例

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

使用顏色名稱的列規則顏色屬性

要設定規則的顏色，可以使用顏色名稱（例如 red、blue、green 等）指定顏色。在以下示例中，顏色名稱已與 column-rule-color 屬性一起使用。

示例

<!DOCTYPE html>
<html>

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

      }

      .p1 {
         column-rule-color: red;
      }

      .p2 {
         column-rule-color: blue;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-color property
   </h2>
   <p>
      column-rule-color: Color names( red and blue)
   </p>
   <div class="multicol-col-rule p1">
      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/>
   <div class="multicol-col-rule p2">
      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>

使用十六進位制值的列規則顏色屬性

要設定規則的顏色，可以使用十六進位制值（例如 #ff0000、#ffff00 等）指定顏色。在以下示例中，十六進位制值已與 column-rule-color 屬性一起使用。

示例

<!DOCTYPE html>
<html>

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

      }

      .p1 {
         column-rule-color: #ff3300;
      }

      .p2 {
         column-rule-color: #990099;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-color property
   </h2>
   <p>
      column-rule-color: Hex values (#ff3300, #990099)
   </p>
   <div class="multicol-col-rule p1">
      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/>
   <div class="multicol-col-rule p2">
      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>

使用 RGB 值的列規則顏色屬性

要設定規則的顏色，可以使用 rgb 值（例如 rgb(255, 0, 0)、rgb(0, 0, 153) 等）指定顏色。在以下示例中，rgb 值已與 column-rule-color 屬性一起使用。

示例

<!DOCTYPE html>
<html>

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

        }

        .p1 {
            column-rule-color: rgb(0, 179, 89);
        }

        .p2 {
            column-rule-color: rgb(255, 0, 128);
        }
    </style>
</head>

<body>
   <h2>
      CSS column-rule-color property
   </h2>
   <p>
      column-rule-color: RGB Values rgb(0, 179, 89), 
      rgb(255, 0, 128)
   </p>
   <div class="multicol-col-rule p1">
      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/>
   <div class="multicol-col-rule p2">
      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>

使用 HSL 值的列規則顏色屬性

要設定規則的顏色，可以使用 hsl 值（例如 hsl(0, 100%, 50%)、hsl(60, 100%, 50%) 等）指定顏色。在以下示例中，hsl 值已與 column-rule-color 屬性一起使用。

示例

<!DOCTYPE html>
<html>

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

      }

      .p1 {
         column-rule-color: hsl(240, 20%, 50%);
      }

      .p2 {
         column-rule-color: hsl(150, 50%, 40%);
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-color property
   </h2>
   <p>
      column-rule-color: HSL Values hsl(240, 20%, 50%), 
      hsl(150, 50%, 40%)
   </p>
   <div class="multicol-col-rule p1">
      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/>
   <div class="multicol-col-rule p2">
      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>

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
column-rule-color 50.0 10.0 52.0 9.0 37.0
css_properties_reference.htm
列印頁面
上一頁
下一頁
廣告