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

text-shadow

text-shadow

text-shadow

text-shadow

text-shadow

上に戻る