outline-style

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

outline-style CSS 屬性設定元素輪廓的樣式。輪廓是圍繞元素繪製的一條線，位於 border 之外。

試一試

outline-style: none;

outline-style: dotted;

outline-style: solid;

outline-style: groove;

outline-style: inset;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with an outline around it.
  </div>
</section>

#example-element {
  outline: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

在定義輪廓外觀時，通常使用簡寫屬性 outline 更方便。

語法

css

/* Keyword values */
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;

/* Global values */
outline-style: inherit;
outline-style: initial;
outline-style: revert;
outline-style: revert-layer;
outline-style: unset;

outline-style 屬性可指定為下面列出的任意一個值。

值

auto: 允許使用者代理渲染自定義輪廓樣式。
none: 不使用輪廓。outline-width 為 0。
dotted: 輪廓是一系列點。
dashed: 輪廓是一系列短線段。
solid: 輪廓是單線。
double: 輪廓是兩條單線。outline-width 是兩條線及其之間空間的和。
groove: 輪廓看起來像是雕刻到頁面中。
ridge: 與 groove 相反：輪廓看起來像是從頁面中擠壓出來。
inset: 輪廓使盒子看起來像是嵌入頁面中。
outset: 與 inset 相反：輪廓使盒子看起來像是從頁面中突出。

正式定義

初始值	`none`
應用於	所有元素
繼承性	否
計算值	同指定值
動畫型別	按計算值型別

正式語法

outline-style = 
  auto                  |
  <outline-line-style>

示例

將輪廓樣式設定為 auto

auto 值表示自定義輪廓樣式，在規範中描述為“通常是一種樣式，[它]是平臺的預設使用者介面樣式，或者可能是一種比 CSS 中可以詳細描述的樣式更豐富的樣式，例如，一個帶有半透明外部畫素的圓角輪廓，看起來會發光”。

HTML

html

<div>
  <p class="auto">Outline Demo</p>
</div>

CSS

css

.auto {
  outline-style: auto; /* same result as "outline: auto" */
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

結果

將輪廓樣式設定為虛線和點線

HTML

html

<div>
  <div class="dotted">
    <p class="dashed">Outline Demo</p>
  </div>
</div>

CSS

css

.dotted {
  outline-style: dotted; /* same result as "outline: dotted" */
}
.dashed {
  outline-style: dashed;
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

結果

將輪廓樣式設定為實線和雙線

HTML

html

<div>
  <div class="solid">
    <p class="double">Outline Demo</p>
  </div>
</div>

CSS

css

.solid {
  outline-style: solid;
}
.double {
  outline-style: double;
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

結果

將輪廓樣式設定為 groove 和 ridge

HTML

html

<div>
  <div class="groove">
    <p class="ridge">Outline Demo</p>
  </div>
</div>

CSS

css

.groove {
  outline-style: groove;
}
.ridge {
  outline-style: ridge;
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

結果

將輪廓樣式設定為 inset 和 outset

HTML

html

<div>
  <div class="inset">
    <p class="outset">Outline Demo</p>
  </div>
</div>

CSS

css

.inset {
  outline-style: inset;
}
.outset {
  outline-style: outset;
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

結果

規範

規範
CSS Basic User Interface Module Level 4 # outline-style

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面最後由 MDN 貢獻者在 2025 年 7 月 14 日修改。

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