在 CSS3 中設定列規則

要設定列規則，可以使用速記的列規則屬性，可以在其中設定以下屬性：

column-rule-width: set the width of the rule between columns
column-rule-style: set the style of the rule between columns
column-rule-color: set the rule of the rule between columns

列規則的值可以設定為：

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

另外，這些屬性可以分開使用。我們來看看這兩個示例。

列規則速記屬性

在此示例中，我們使用速記屬性設定了列規則：

column-rule: 5px dotted orange;

以上示例將設定規則寬度為 5px、樣式為點線、顏色為橙色。

示例

現在我們來看一個示例：

<!DOCTYPE html>
<html>
<head>
   <style>
      .demo {
         column-count: 5;
         -webkit-column-count: 5; /* Chrome, Safari, Opera */
         -moz-column-count: 5; /* Firefox */
         -webkit-column-gap: normal; /* Chrome, Safari, Opera */
         -moz-column-gap: normal; /* Firefox */
         column-gap: normal;
         -webkit-column-rule: 5px dotted orange; /* Chrome, Safari, Opera */
         -moz-column-rule: 5px dotted orange; /* Firefox */
         column-rule: 5px dotted orange;
      }
   </style>
</head>
<body>
   <h1>PyTorch</h1>
   <div class="demo">
      PyTorch is defined as an open source machine learning library for Python. It is used for applications such as natural language processing. It is initially developed by Facebook artificial-intelligence research group, and Uber’s Pyro software for probabilistic programming which is built on it.
      Originally, PyTorch was developed by Hugh Perkins as a Python wrapper for the LusJIT based on Torch framework. There are two PyTorch variants.
      PyTorch redesigns and implements Torch in Python while sharing the same core C libraries for the backend code. PyTorch developers tuned this back-end code to run Python efficiently. They also kept the GPU based hardware acceleration as well as the extensibility features that made Lua-based Torch.
   </div>
</body>
</html>

設定列規則

我們來看一個使用所有屬性的示例，這些屬性用於將列規則置於速記屬性的位置。這將設定列規則寬度、顏色和樣式：

column-rule-width: 5px;
column-rule-color: blue;
column-rule-style: double;

示例

示例：

<!DOCTYPE html>
<html>
<head>
   <style>
      .demo {
         column-count: 4;
         -webkit-column-count: 4; /* Chrome, Safari, Opera */
         -moz-column-count: 4; /* Firefox */
         -webkit-column-gap: normal; /* Chrome, Safari, Opera */
         -moz-column-gap: normal; /* Firefox */
         column-gap: normal;
         -webkit-column-rule-width: 5px; /* Chrome, Safari, Opera */
         -moz-column-rule-width: 5px; /* Firefox */
         column-rule-width: 5px;
         -webkit-column-rule-color: blue; /* Chrome, Safari, Opera */
         -moz-column-rule-color: blue; /* Firefox */
         column-rule-color: blue;
         -webkit-column-rule-style: double; /* Chrome, Safari, Opera */
         -moz-column-rule-style: double; /* Firefox */
         column-rule-style: double;
      }
   </style>
</head>
<body>
   <h1>PyTorch</h1>
   <div class="demo">
      PyTorch is defined as an open source machine learning library for Python. It is used for applications such as natural language processing. It is initially developed by Facebook artificial-intelligence research group, and Uber’s Pyro software for probabilistic programming which is built on it.
      Originally, PyTorch was developed by Hugh Perkins as a Python wrapper for the LusJIT based on Torch framework. There are two PyTorch variants.
      PyTorch redesigns and implements Torch in Python while sharing the same core C libraries for the backend code. PyTorch developers tuned this back-end code to run Python efficiently. They also kept the GPU based hardware acceleration as well as the extensibility features that made Lua-based Torch.
   </div>
</body>
</html>

更新於：27-12-2023

130 次瀏覽

啟動你的 事業

透過完成課程獲得認證

開始
廣告