text-shadow CSS3

text-shadow は、テキストに影をつけるときに使用します。影の効果は、前面から背面へ適用され、カンマ（,）で区切って指定した場合、最初の影が一番上になります。影は重なってもテキスト自体に重なることはありません。

Value（値）

none: 初期値影なし
色: カラーコードや色名で指定します。長さの値の前か後に指定します。省略した場合はブラウザに依存。
実数値＋単位: 影の長さを指定。最初の値：右へずらす（負の値は左へずらす）、二番目の値：下へずらす（負の値は上へずらす）、その次に影をぼかす範囲の値を指定することも可能。

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p { font-family: "Times New Roman"; font-size: 36pt; }
   p.test1 { text-shadow: 2px 2px; }
   p.test2 { text-shadow: 2px 2px 2px; }
   p.test3 { text-shadow: #ff00ff 2px 2px 2px; }
   p.test4 { text-shadow: 2px 2px 2px #ff00ff; }
   p.test5 { text-shadow: 2px 2px 2px #ff00ff, -2px -2px -2px #00ffff; }
   p.test6 { text-shadow: 2px 2px 2px #ff00ff, 4px 4px 4px #00ffff, 8px 8px 8px #003300; }
  </style>
 </head>
 <body>
   <p class="test1">text-shadow</p>
   <p class="test2">text-shadow</p>
   <p class="test3">text-shadow</p>
   <p class="test4">text-shadow</p>
   <p class="test5">text-shadow</p>
   <p class="test6">text-shadow</p>
 </body>
</html>

display

text-shadow