| |
| Internet Explorer | Netscape Navigator | iCab | Opera | Safari | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 3.0x | 4.0x | 4.5 | 5.0x | 5.5 | 6.0 | 2.0x | 3.0x | 4.x | 6.0 | 2.x | 7.x | 1.x | |
| Windows | × | × | - | × | × | × | × | × | × | × | - | ||
| Macintosh | × | × | × | × | - | - | × | × | × | × | × | × | ○ |
| UNIX | - | - | - | - | - | - | × | × | × | × | - | ||
| ポイント | .tShadow { text-shadow:3px 3px #8080ff; } |
|---|---|
| 説 明 | 文字に影を付けるにはtext-shadowを使います。最初がX方向の影の移動量、次がY方向の影の移動量、最後が影の色になります。X, Y座標は右下にいくに従って値が大きくなります。 |
| サンプル | <html> <head> <title>文字に影を付ける【Safari】</title> <style type="text/css"><!-- .tShadow { text-shadow:3px 3px #8080ff; } --></style> </head> <body> <h1 class="tShadow">テキストシャドウ</h1> <div class="tShadow" style="font-family:Impact">Text Shadow -----------</div> <div> 上の見出しには、うっすらと影がついています。 </div> </body> </html> |
| 補足説明 | Safari 1.1以降で動作します。CSS2.1では、このプロパティはなくなっています。CSS3では復活しています。 |
| ■サンプルを実行する >>実行 ■各ブラウザでの動作結果を見る >>View! |