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
打印页面
上一页
下一页
广告