⌘K

text-decoration-style プロパティ

text-decoration-style プロパティは、 テキストの装飾線の種類を変更します：実線、二重線、 点線、破線、波線。

このプロパティは、text-decoration-line および text-decoration-color プロパティと組み合わせて使用する必要があります。 これらのプロパティは、text-decoration プロパティの機能を拡張し、より高度な代替手段となります。

構文

cssセレクタ {
  text-decoration-line: solid | double | dotted | dashed | wavy;
}

値

値 説明
solid 実線。
double 二重線。
dotted 点線。
dashed 破線。
wavy 波線。

初期値: solid。

例 . wavy 値

以下のテキストは赤い波線の下線付きになります: 

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>
css#elem {
  text-decoration-style: wavy;
  text-decoration-color: red;
  text-decoration-line: underline;
}

Результат:

例 . dotted 値

以下のテキストは赤い点線の下線付きになります: 

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>
css#elem {
  text-decoration-style: dotted;
  text-decoration-color: red;
  text-decoration-line: underline;
}

Результат:

例 . double 値

以下のテキストは赤い二重線の取り消し線付きになります: 

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>
css#elem {
  text-decoration-style: double;
  text-decoration-color: red;
  text-decoration-line: line-through;
}

Результат:

Backプロパティ text-decoration-lineNexttext-decoration-color プロパティ