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

列印頁面