text-shadowプロパティは、テキストに影を付けることができます。

このtext-shadowプロパティはCSS2で定義され、CSS2.1で削除されていますが、CSS3で再定義されました。 CSS3へのサポートが進んでいる昨今では、IE以外のブラウザでほぼ問題無く利用する事ができます。

IEにも対応させたい場合、独自拡張のビジュアルフィルタを使うかJavaScriptを使う事で似たような効果を得る事ができます。

• IEでCSS3のドロップシャドウを使いたい【ppBlog1.8.7】

尚、白背景に白テキストで影によってテキストが読めるような指定（下記サンプルの07のような）等は、未対応ブラウザでテキストが読めなくなってしまう事も有るので、そのような指定は避けるか何らかの対処が必要です。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

none｜[<影>, ]* <影>｜inherit

初期値

none

適用される要素

全ての要素とコンテンツ

継承

します

パーセント値

N/A

メディア

visual

値の解説

none

影を付けない（何もしない）

<影>

シャドウ部分は以下のように指定する。
<色>? <長さ(右)> <長さ(下)> <長さ(ぼかし)>?
もしくは、
<長さ(右)> <長さ(下)> <長さ(ぼかし)>? <色>?

<影>の補足

一つ目と二つ目の長さは省略不可で、3つ目の長さ（ぼかし）と影の色は省略可能です。
色を省略した場合は、colorプロパティの値が適用されます。
また、カンマ（,）区切りで複数指定ができます。この複数指定を行った場合、指定順で下から上へと重なって行き、最後に本来のテキストが表示されます。

text-shadowのサンプル

p {
  margin: 10px 20px 25px;
  font-size: 150%;
  font-weight: bold;
}

p.shadow01 {
  text-shadow: 1px 1px #999;
}

p.shadow02 {
  text-shadow: 1px 1px 1px #999;
}

p.shadow03 {
  color: #f00;
  text-shadow: 0px 0px 5px #f66;
}

p.shadow04 {
  text-shadow: 3px 3px #F99;
}

p.shadow05 {
  text-shadow: 3px 3px 3px #99F;
}

p.shadow06 {
  margin-top: 25px;
  margin-bottom: 30px;
  text-shadow: -12px -12px red, 12px 12px green;
}

p.shadow07 {
  color: #f4f4f4;
  text-shadow: 0px -1px #333, 1px 0px #333, 0px 1px #333, -1px 0px #333;
}

p.shadow08 {
  padding: 10px;
  background: #000;
  color: #fff;
  text-shadow: 1px 1px #ccc, 2px 2px #aaa, 3px 3px #999,
  4px 4px #666, 5px 5px #333;
}

p.shadow09 {
  text-shadow: 0px -1px #fff, 1px 0px #fff, 0px 1px #fff, -1px 0px #fff,
  2px 2px #333, 3px 3px #333, 4px 4px #333, 5px 5px #333;
}

p.shadow10 {
  text-shadow: 0px -1px #fff, 1px 0px #fff, 0px 1px #fff, -1px 0px #fff,
  2px 2px 3px #666;
}

<p class="shadow01">text-shadowのサンプルテキスト 01</p>
<p class="shadow02">text-shadowのサンプルテキスト 02</p>
<p class="shadow03">text-shadowのサンプルテキスト 03</p>
<p class="shadow04">text-shadowのサンプルテキスト 04</p>
<p class="shadow05">text-shadowのサンプルテキスト 05</p>
<p class="shadow06">text-shadowのサンプルテキスト 06</p>
<p class="shadow07">text-shadowのサンプルテキスト 07</p>
<p class="shadow08">text-shadowのサンプルテキスト 08</p>
<p class="shadow09">text-shadowのサンプルテキスト 09</p>
<p class="shadow10">text-shadowのサンプルテキスト 10</p>

このサンプルを対応しているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

text-shadowのサンプルテキスト 01

text-shadowのサンプルテキスト 02

text-shadowのサンプルテキスト 03

text-shadowのサンプルテキスト 04

text-shadowのサンプルテキスト 05

text-shadowのサンプルテキスト 06

text-shadowのサンプルテキスト 07

text-shadowのサンプルテキスト 08

text-shadowのサンプルテキスト 09

text-shadowのサンプルテキスト 10

ここぞとばかりにどうなるか試した感じですが、どれも思ったより問題無く表示されているのが確認できます。
08～10まではOpera10で確認すると上手く行っていないようです。
また、text-shadowプロパティは最近のブラウザはIEを除きほぼ対応していますが、現在対応しているブラウザでもバージョンが一つ古いだけで対応していない可能性もあるため、07のような指定をすると未対応ブラウザではほぼ見えなくなってしまうので、使わないようにするのが良いと思います。

また、ドロップシャドウを作るのに便利なサイトが有るのでご紹介。
以下のサイトは、対応ブラウザで閲覧する事により、数値を入力するだけでプレビュー画面を観ながらtext-shadowの指定ができます。他にも上部のナビゲーションから移動すれば、box-shadowやグラデーションなんかも簡単に作れます。

• Text Shadows