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

打印页面