<line-style> - CSS | MDN

語法

值

<line-style> 列舉型別使用下面列出的值之一來指定：

none: 不顯示線條。即使指定了寬度值，線條的計算寬度也為 0。在表格單元格和邊框合併的情況下，none 值的優先順序最低。如果設定了任何其他衝突的邊框，它將被顯示。none 值與 hidden 類似。
hidden: 不顯示線條。即使指定了寬度值，線條的計算寬度也為 0。在表格單元格和邊框合併的情況下，hidden 值的優先順序最高。如果設定了任何其他衝突的邊框，它將不會被顯示。hidden 值與 none 類似，但 hidden 不是輪廓樣式的有效值。
dotted: 顯示為一系列圓點。圓點的半徑是線條計算寬度值的一半。圓點的間距未由規範定義，由具體實現決定。
dashed: 顯示為一系列短的方頭虛線或線段。線段的確切大小和長度未由規範定義，由具體實現決定。
solid: 顯示為一條單實直線。
double: 顯示為兩條直線，中間有一些間隔。兩條線的寬度之和等於由線條寬度定義的畫素大小。
groove: 顯示為具有雕刻外觀的邊框。該值與 ridge 相反。
ridge: 顯示為具有凸出外觀的邊框。該值與 groove 相反。
inset: 顯示為使元素看起來是嵌入的邊框。該值與 outset 相反。當應用於表格單元格邊框且 border-collapse 設定為 collapsed 時，該值的行為類似於 groove。
outset: 顯示為使元素看起來是浮雕的邊框。該值與 inset 相反。當應用於表格單元格且 border-collapse 設定為 collapsed 時，該值的行為類似於 ridge。

備註：當 <outline-style> 用作 outline 和 outline-style 屬性的值型別時，它與 <line-style> 類似，但不支援 hidden 並且包含 auto 值。當設定 auto 時，將使用使用者代理定義的 <line-style> 值。

正式語法

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

示例

第一個示例演示了所有的 <line-style> 關鍵字值。第二個示例演示了一些線條樣式顏色可能會以意想不到的方式顯示。

定義線條樣式

本示例展示了所有 <line-style> 值作為 CSS border-style 和 column-rule-style 屬性的值。

HTML

本示例使用多個 <div> 元素，每個元素都有一個表示正在演示的 <line-style> 值的類。

html

<div class="{line-style}">
  <p>{line-style}</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>

<div class="none">
  <p>none</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="hidden">
  <p>hidden</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="dotted">
  <p>dotted</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="dashed">
  <p>dashed</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="solid">
  <p>solid</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="double">
  <p>double</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="groove">
  <p>groove</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="ridge">
  <p>ridge</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="inset">
  <p>inset</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="outset">
  <p>outset</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>

CSS

在本示例的 CSS 中，所有 <p> 元素的邊框和列規則都被定義為寬度為 7px，樣式值為 double。對於每個段落，透過為 border-style 和 column-rule-style 屬性指定不同的 <line-style> 值來覆蓋 double 值。

div {
  display: flex;
  gap: 1em;
  list-style: none;
  align-items: center;
}
div:first-of-type {
  display: none;
}

p:first-of-type {
  text-align: center;
  line-height: 5em;
}
p {
  width: 10em;
  height: 5em;
  background-color: palegoldenrod;
}

css

p {
  padding: 5px;
  border: double 7px #bada55;
}
p + p {
  columns: 3;
  column-gap: 20px;
  column-rule: double 7px;
  border-color: black;
}
.none p {
  border-style: none;
  column-rule-style: none;
}
.hidden p {
  border-style: hidden;
  column-rule-style: hidden;
}
.dotted p {
  border-style: dotted;
  column-rule-style: dotted;
}
.dashed p {
  border-style: dashed;
  column-rule-style: dashed;
}
.solid p {
  border-style: solid;
  column-rule-style: solid;
}
.double p {
  border-style: double;
  column-rule-style: double;
}
.groove p {
  border-style: groove;
  column-rule-style: groove;
}
.ridge p {
  border-style: ridge;
  column-rule-style: ridge;
}
.inset p {
  border-style: inset;
  column-rule-style: inset;
}
.outset p {
  border-style: outset;
  column-rule-style: outset;
}

結果

請注意，黑色邊框並不總是黑色的。

定義線條樣式和顏色

本示例演示了線條樣式和顏色選擇。對於某些 <line-style> 關鍵字值，線條的顏色可能不是你所期望的。為了在顯示黑色或白色時建立 groove、ridge、inset 和 outset 樣式所需的“3D”效果，使用者代理使用的顏色計算方式不同於任何其他顏色與線條的組合。

CSS

每個 <div> 的四個邊都有不同的 <line-style> 值，每個列表項都有不同的 <color> 值。我們使用生成內容來顯示內聯宣告的 CSS。

body {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  text-transform: uppercase;
  font-family: monospace;
}

css

div {
  border-width: 10px;
  border-style: inset groove ridge outset;
  padding: 5px;
}

JavaScript

JavaScript 動態建立 <div> 元素，每個元素都設定了不同的 border-color。

// prettier-ignore
const colors = [
  "#000000", "#000001", "#ffffff",
  "#ff00ff", "#ffff00", "#00ffff",
  "#cc33cc", "#cccc33", "#33cccc",
  "#ff0000", "#00ff00", "#0000ff",
  "#cc3333", "#33cc33", "#3333cc",
  "#993333", "#339933", "#333399",
];

for (const c of colors) {
  const div = document.createElement("div");
  div.style.borderColor = c;
  div.textContent = c;
  document.body.appendChild(div);
}

結果

請注意，接近黑色的 #000001 可能與實際的黑色不同，當使用較淺的顏色時，深色和淺色邊緣之間的對比度更加明顯。

規範

規範
CSS Backgrounds and Borders Module Level 3 # typedef-line-style

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁最後修改於 ⁨2025⁩年⁧8⁩月⁧9⁩日，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題