1. Web
  2. CSS
  3. text-decoration-style

text-decoration-style

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流瀏覽器均已支援。

text-decoration-style CSS 屬性用於設定 text-decoration-line 指定的文字裝飾線的樣式。該樣式適用於所有透過 text-decoration-line 設定的文字裝飾線。

試一試

text-decoration-style: solid;

text-decoration-style: double;

text-decoration-style: dotted;

text-decoration-style: dashed;

text-decoration-style: wavy;

<section id="default-example">
  <p>
    I'd far rather be
    <span class="transition-all" id="example-element">happy than right</span>
    any day.
  </p>
</section>

p {
  font: 1.5em sans-serif;
}

#example-element {
  text-decoration-line: underline;
}

如果指定的裝飾具有特定的語義含義，例如表示某些文字已被刪除的刪除線，建議作者使用 HTML 標籤（如 <del> 或 <s>）來表示此含義。由於瀏覽器在某些情況下可能會停用樣式，因此在這種情況下，語義含義不會消失。

當同時設定多個線條裝飾屬性時，使用 text-decoration 簡寫屬性可能更方便。

語法

css
/* Keyword values */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

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

值

solid

繪製單線。

double

繪製雙線。

dotted

繪製點線。

dashed

繪製虛線。

波浪線

繪製波浪線。

-moz-none

不繪製線。請改用 text-decoration-line: none。

正式定義

初始值solid
應用於所有元素。也適用於 ::first-letter 和 ::first-line。
繼承性否
計算值同指定值
動畫型別離散

正式語法

text-decoration-style = 
  solid   |
  double  |
  dotted  |
  dashed  |
  wavy

示例

設定波浪下劃線

以下程式碼將建立一個紅色波浪下劃線

CSS

css
.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

HTML

html
<p class="wavy">This text has a wavy red line beneath it.</p>

結果

規範

規範
CSS 文字裝飾模組級別 3
# text-decoration-style 屬性

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面由 MDN 貢獻者 最後修改於 。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.