text-shadowプロパティは、その名から想像するとおり、テキストに影をつける(ドロップシャドウ)ことができます。
仕様
box-shadowでは「広がり」がありますが、text-shadowには「広がり」はありません(参考:box-shadowを極める)。
サンプル
- text-shadow:3px 3px #fff;
-
testテキスト
- text-shadow:3px 3px rgba(255,0,0,0.4);
-
testテキスト
- text-shadow:3px 3px 3px rgba(255,0,0,0.4);
-
testテキスト
プログレッシブ・エンハンスメント
IE8以下では、text-shadowは適用されません。
とはいえ、シャドウがかからなくても情報は正しく伝わるため、プログレッシブ・エンハンスメントを適用しシャドウが適用されないブラウザは残念、ということでぼくはやり過ごすことにします。