最終更新日

text-shadowプロパティ

text-shadowは、文字に影を付けるプロパティです。指定した影は、要素内のすべての文字へ適用されます。

影の設定は、2~3個の長さの値を半角スペースで区切って指定します。

・1個目の値は、水平方向への影の長さを指定。正の値は右方向へ、負の値は左方向への距離(省略不可
・2個目の値は、垂直方向への影の長さを指定。正の値は下方向へ、負の値は上方向への距離(省略不可
・3個目の値は、影のぼかし範囲を指定。値が大きいほど影の端がぼやける(省略可能

任意で「色」を指定できます。色の値は、colorプロパティを参照してください。色の指定を省略するとブラウザの設定色になります。

影の値は、カンマで区切って複数指定することも可能です。その場合は、最初に指定した影の層が一番上に配置され、次の影はそれぞれその下へ順に配置されます。

ボックスに影をつける場合は、box-shadowを使用します。

CSS3での変更点
・text-shadowは、CSS3から新しく追加されたプロパティです。
初期値 適用先 継承
none すべての要素 あり
説明
長さの値 影の長さなどを「px」や「em」で指定します。
色の値 色の指定を省略するとブラウザの設定色になります。
none 文字に影を付けません。(初期値
サンプルコード
text-shadow: 5px 5px;
text-shadow: 5px 5px 5px;
text-shadow: 5px 5px 5px #f00;
text-shadow: 5px 5px 5px rgba(0,0,0,0.5);
text-shadow: 5px 5px 5px #f00, 7px 7px 7px #00f;
参考文献:CSS Text Level 3外部リンク
HOME
当サイトの活動をサポートしてみませんか?気軽にクリエイターの支援ができます。