text-decoration-style CSS3

text-decoration-style は、要素で指定したテキスト装飾のために描画される線のスタイルを指定します。 値は border-style と同じ意味です。

名前:text-decoration-style
値: solid | double | dotted | dashed | wavy
初期値:solid
適用対象:全ての要素
継承:しない
パーセンテージ:n/a
メディア:visual（視覚的）
計算値:as specified（指定通り）
アニメーション:できない

Value（値）

solid
初期値 １つの実線
double
2つの平行の実線
dotted
一連の丸い点
dashed
一連の四角の破線
wavy
波線

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p.test1 { text-decoration-line: underline; text-decoration-style: wavy; }
   p.test2 { text-decoration-line: underline overline; text-decoration-style: solid; }
  </style>
 </head>
 <body>
   <p class="test1">波線になります</p>
   <p class="test2">上下に線がつきます</p>
 </body>
</html>

display

波線になります

上下に線がつきます

  • Google Chrome 64.0.3282.186、Firefox58.0.2にて表示確認。（2018/3/14）
上に戻る