CSS 資料型別 - <line-style>

<line-style> 資料型別表示指定線型或無線的關鍵字值。

<line-style> 關鍵字用於以下列出的邊框和列屬性

可能的值

以下值之一用於指定<line-style> 列舉型別

none - 不顯示任何線條。
hidden - 與none值類似，不顯示任何線條。具有hidden顯示選項的元素不會顯示任何線條（即使指定了寬度值）。當hidden優先時，衝突的邊框會被隱藏，例如表格單元格或邊框摺疊。
dotted - 顯示一系列圓點。
dashed - 它顯示一系列短的方形虛線或線段。
solid - 此設計顯示一條單一、不間斷的實線，永不中斷。
double - 顯示兩條直的平行線，這兩條線之間由預定的距離隔開，兩條線的總長度等於線條的寬度（以畫素為單位）。
groove - 顯示帶有雕刻外觀的邊框。
ridge - 顯示帶有擠出外觀的邊框。
inset - 顯示使元素看起來嵌入的邊框。當應用於具有collapsed border-collapse 設定的表格單元格邊框時，它充當groove樣式。
outset - 它顯示一種抬高或提升元素外觀的邊框樣式。當在邊框摺疊設定為摺疊的表格單元格中使用時，其功能類似於ridge樣式。

語法

<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

CSS <line-style> - 定義線型。

以下示例中的<line-style>值與 CSS 屬性（如border-style）完全對應，這些屬性定義了不同的邊框外觀，如 none、hidden、dotted、dashed、solid、double、groove、ridge、inset 和 outset。

這些<line-style>描述為 HTML 元素提供了廣泛的樣式選擇，並且嚴格控制邊框的視覺顯示方式。

 
<html>
<head>
<style>
   div {
      display: inline-block;
      margin: 5px;
      padding: 5px;
   }
   p {
      margin: 5px;
      font-weight: bold;
      padding: 5px;
      border: double 7px #44ebb3;
   }
   p + p {
      columns: 2;
      column-gap: 10px;
      column-rule: double 7px;
      border-color: #727876;
   }
   .no-border p {
      border-style: none;
   }
   .hidden-border p {
      border-style: hidden;
   }
   .dotted-border p {
      border-style: dotted;
   }
   .dashed-border p {
      border-style: dashed;
   }
   .solid-border p {
      border-style: solid;
   }
   .double-border p {
      border-style: double;
   }
   .groove-border p {
      border-style: groove;
   }
   .ridge-border p {
      border-style: ridge;
   }
   .inset-border p {
      border-style: inset;
   }
   .outset-border p {
      border-style: outset;
   }
</style>
</head>
<body>
<div class="no-border">
   <p>no-border</p>
   <p>This is an example of no border</p>
</div>
<div class="hidden-border">
   <p>hidden-border</p>
   <p>This is an example of hidden border</p>
</div>
<div class="dotted-border">
   <p>dotted-border</p>
   <p>This is an example of dotted border</p>
</div>
<div class="dashed-border">
   <p>dashed-border</p>
   <p>This is an example of dashed border</p>
</div>
<div class="solid-border">
   <p>solid-border</p>
   <p>This is an example of solid border</p>
</div>
<div class="double-border">
   <p>double-border</p>
   <p>This is an example of double border</p>
</div>
<div class="groove-border">
   <p>groove-border</p>
   <p>This is an example of groove border</p>
</div>
<div class="ridge-border">
   <p>ridge-border</p>
   <p>This is an example of ridge border</p>
</div>
<div class="inset-border">
   <p>inset-border</p>
   <p>This is an example of inset border</p>
</div>
<div class="outset-border">
   <p>outset-border</p>
   <p>This is an example of outset border</p>
</div>
</body>
</html>

CSS <line-style> - 定義線型和顏色

<line-style> 指示以下示例中使用的各種邊框樣式。
每種線型都有一個對應的 border-color 特性，它顯示一系列顏色。
這說明了透過組合不同的樣式和顏色組合可以實現的各種邊框外觀。

 
<html>
<head>
<style>
   body {
      font-family: Arial, sans-serif;
   }
   .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      margin-top: 20px;
   }
   .box {
      width: 200px;
      padding: 20px;
      margin: 10px;
   }
   p {
      margin: 5px;
      font-weight: bold;
      padding: 5px;
      border: double 7px #44ebb3;
   }
   .line-example {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 10px;
   }
   .line-example .box {
      flex: 1;
      margin: 10px;
   }
   .line-example p {
      font-weight: normal;
      padding: 10px;
      margin: 0;
   }
   .dotted-border p {
      border-style: dotted;
      border-color: #FF5733; /* Orange */
   }
   .dashed-border p {
      border-style: dashed;
      border-color: #2E86C1; /* Blue */
   }
   .solid-border p {
      border-style: solid;
      border-color: #58D68D; /* Green */
   }
   .double-border p {
      border-style: double;
      border-color: #D4AC0D; /* Yellow */
   }
   .groove-border p {
      border-style: groove;
      border-color: #9B59B6; /* Purple */
   }
   .ridge-border p {
      border-style: ridge;
      border-color: #E74C3C; /* Red */
   }
   .inset-border p {
      border-style: inset;
      border-color: #3498DB; /* Light Blue */
   }
   .outset-border p {
      border-style: outset;
      border-color: #27AE60; /* Dark Green */
   }
</style>
</head>
<body>
<div class="container">
<div class="box dotted-border">
   <p>Dotted</p>
   <p>This is an example of dotted line</p>
</div>
<div class="box dashed-border">
   <p>Dashed</p>
   <p>This is an example of dashed line</p>
</div>
<div class="box solid-border">
   <p>Solid</p>
   <p>This is an example of solid line</p>
</div>
<div class="box double-border">
   <p>Double</p>
   <p>This is an example of double line</p>
</div>
<div class="box groove-border">
   <p>Groove</p>
   <p>This is an example of groove line</p>
</div>
<div class="box ridge-border">
   <p>Ridge</p>
   <p>This is an example of ridge line</p>
</div>
<div class="box inset-border">
   <p>Inset</p>
   <p>This is an example of inset line</p>
</div>
<div class="box outset-border">
   <p>Outset</p>
   <p>This is an example of outset line</p>
</div>
</div>
</body>
</html>

列印頁面