備忘録的プログラミングリファレンス

text-decoration-styleプロパティ

 text-decoration-styleプロパティは、text-decoration-lineプロパティによるテキストの装飾線の線種(ラインのスタイル)を指定するプロパティです。
 text-decoration-lineプロパティによる線を、無地、波状、点線、破線、二重などに指定することができます。
 CSSでは、text-decorationプロパティはテキストへの装飾という扱いです。

波の下線(Exampleの参照
text-decoration-line: underline;
text-decoration-style: wavy;

関連プロパティ

 以下のような関連するプロパティがあります。

text-decoration-color装飾線の色
text-decoration-style装飾線の線種
text-decoration装飾線のプロパティtext-decoration-*を一括指定

マーカーのような線を加えるにはbackgroundプロパティlinear-gradient()関数を使います。

構文(Syntax)

CSS

text-decoration-style: solid | double | dotted | dashed | wavy | initial | inherit;

DOM(JavaScript)

値の取得
String = object.style.textDecorationStyle;
値の設定
object.style.textDecorationStyle="solid | double | dotted | dashed | wavy | initial | inherit";

値(Values)

Value摘要
solid初期値(default値)、実線
double2重線
dotted点線
dashed破線
wavy波線
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)solid
継承(Inherited)No
CSS AnimationNo

Example

 text-decoration-styleの例です。 text-decoration-lineの設定が必要です。

 ここでは、波線が表示されます。色はtext-decoration-colortext-decorationで設定します。

 マーカーのような線を加えるにはbackgroundプロパティlinear-gradient()関数を使います。