CSS - column-rule-style 属性

CSS 的column-rule-style属性设置在多列布局中列之间绘制的线条的样式。

语法

column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

属性值

值	描述
none	指定没有规则。默认值。
hidden	指定隐藏的规则。
dotted	指定点状规则。
dashed	指定虚线规则。
solid	指定实线规则。
double	指定双线规则。
groove	指定 3D 凹槽规则。效果取决于宽度和颜色值。
ridge	指定 3D 脊状规则。效果取决于宽度和颜色值。
inset	指定 3D 内嵌规则。效果取决于宽度和颜色值。
outset	指定 3D 外凸规则。效果取决于宽度和颜色值。
initial	将属性设置为默认值。
inherit	从父元素继承属性。

CSS 列规则样式属性示例

以下示例使用不同的值解释了column-rule-style属性。

使用 None 值的列规则样式属性

要使列之间没有任何规则，我们使用none值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

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

<body>
   <h2>
      CSS column-rule-style property
   </h2>
   <p>
      column-rule-style: none 
   </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>

使用 Hidden 值的列规则样式属性

要使列之间有透明规则，我们使用hidden值。此值与 none 的唯一区别在于，hidden 创建一个透明规则，而 none 不创建任何规则。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .multicol-col-rule {
         column-count: 3;
         column-gap: 40px;
         column-rule-color: yellow;
         column-rule-width: 8px;
         column-rule-style: hidden;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-style property
   </h2>
   <p>
      column-rule-style: hidden 
   </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>

使用 Dotted 值的列规则样式属性

要使列之间有点状规则，我们使用dotted值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

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

<body>
   <h2>
      CSS column-rule-style property
   </h2>
   <p>
      column-rule-style: dotted 
   </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>

使用 Dashed 值的列规则样式属性

要使列之间有虚线规则，我们使用dashed值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

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

<body>
   <h2>
      CSS column-rule-style property
   </h2>
   <p>
      column-rule-style: dashed 
   </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>

使用 Solid 值的列规则样式属性

要使列之间有实线规则，我们使用solid值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

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

<body>
   <h2>
      CSS column-rule-style property
   </h2>
   <p>
      column-rule-style: solid 
   </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>

使用 Double 值的列规则样式属性

要使列之间有双线规则，我们使用double值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

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

<body>
   <h2>
      CSS column-rule-style property
   </h2>
   <p>
      column-rule-style: double 
   </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>

使用 Groove 值的列规则样式属性

要使列之间有凹槽规则，我们使用groove值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .multicol-col-rule {
         column-count: 3;
         column-gap: 40px;
         column-rule-color: yellow;
         column-rule-width: 8px;
         column-rule-style: groove;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-style property
   </h2>
   <p>
      column-rule-style: groove 
   </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>

使用 Ridge 值的列规则样式属性

要使列之间有脊状规则，我们使用ridge值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .multicol-col-rule {
         column-count: 3;
         column-gap: 40px;
         column-rule-color: yellow;
         column-rule-width: 8px;
         column-rule-style: ridge;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-style property
   </h2>
   <p>
      column-rule-style: ridge 
   </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>

使用 Inset 值的列规则样式属性

要使列之间有内嵌规则，我们使用inset值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .multicol-col-rule {
         column-count: 3;
         column-gap: 40px;
         column-rule-color: yellow;
         column-rule-width: 8px;
         column-rule-style: inset;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-style property
   </h2>
   <p>
      column-rule-style: inset
   </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>

使用 Outset 值的列规则样式属性

要使列之间有外凸规则，我们使用outset值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .multicol-col-rule {
         column-count: 3;
         column-gap: 40px;
         column-rule-color: yellow;
         column-rule-width: 8px;
         column-rule-style: outset;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-style property
   </h2>
   <p>
      column-rule-style: outset 
   </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-style	50.0	10.0	52.0	9.0	37.0

css_properties_reference.htm

打印页面