CSS3: text-shadow プロパティ - テキストに影をつける

■ 概要

項　　目説　　明
記述形式 セレクタ {text-shadow: 値 }
値 の形式 none | 水平距離 垂直距離 ぼかし半径 影の色　（２組指定可）
初 期 値 none
対応ブラウザー C3+ / e10+ / N?+ / Fx3.5+ / Op9.5+ / Ch2+ / Sa1.1+
適用可能な要素 すべての要素
継　　承 する

■ 解説

text-shadowプロパティ は，テキストに影をつける指定をします。

指定できる値の形式は，以下のとおりです。

値説　　明
none テキストに影を表示しません。　（初期値）
水平距離 水平方向の距離（オフセット）を指定します。
垂直距離 垂直方向の距離（オフセット）を指定します。
ぼかし半径 影のぼかし半径を指定します。　（省略可）
影の色 影の色を指定します。

２組の 値：水平距離・垂直距離［・ぼかし半径］・影の色 を並べることで，２つの影をつけることができます。

■ 使用例（ text-shadow プロパティの利用）

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css">
<!--
   p.shad1 { text-shadow: 3px 3px 2px #0000ff;}
   p.shad2 { text-shadow: 1px 1px 0px #ff00ff, 3px 3px 2px #0000ff; }
-->
</style>
HTML
<body> ～ </body>		 
 <p class="shad1">CSS3: text-shadow プロパティ - テキストに影をつける</p>
 <p class="shad2">CSS3: text-shadow プロパティ - テキストに影をつける</p>

ブラウザー 表示例

CSS3: text-shadow プロパティ - テキストに影をつける

CSS3: text-shadow プロパティ - テキストに影をつける

■ 備考

【参考ページ】