説明
text-shadow: shadow; C2
| 値: | none | [ <色> || <長さ> <長さ> <長さ>? ,]* [ <色> || <長さ> <長さ> <長さ>? ] | inherit |
初期値：none、適用要素：すべて、継承：しない、%値：なし、メディア：ビジュアル
このプロパティは、テキストに適用する半角スペース[ ]で区切られた影効果を、コンマ[,]で区切ったリストで指定します。影効果はコンマ[,]で区切られたリストの順に上塗りされて表示されます。影効果によってボックスの大きさに影響を与えることはありませんが、影効果はボックスの外にも表示されます。
影効果の範囲指定は、それぞれ、「右側の影、下側の影、影の周囲のぼかしの範囲」の順序で指定します。位置の指定は必須ですが、ぼかしの範囲はオプション(任意)です。
また、影の色の指定がない場合は文字色を参照します。
*1 CSS2.1仕様書において、「text-shadowプロパティ」は削除されました。
影効果の範囲指定は、それぞれ、「右側の影、下側の影、影の周囲のぼかしの範囲」の順序で指定します。位置の指定は必須ですが、ぼかしの範囲はオプション(任意)です。
また、影の色の指定がない場合は文字色を参照します。
*1 CSS2.1仕様書において、「text-shadowプロパティ」は削除されました。
使用例
次の例では、テキストの右下に影が付きます。影の色は指定がないので文字色を参照し、ぼかしの範囲の指定もないのでぼかされません。
H1 { text-shadow: 0.2em 0.2em }
次の例では、テキストの右下に影が付きます。影の周囲5pxの範囲でぼかしが生じ、影の色は赤になります。
H2 { text-shadow: 3px 3px 5px red }
次の例では、複数の影効果が生じます。1つ目の影は、ぼかしなし、影の色は赤で、テキストの右下3pxに影が生じます。2つ目の影は1つ目の影を上塗りし、ぼかしあり、色は黄色で、テキストの左下に影が生じます。3つ目はさらに影を上塗りし、文字色を参照したぼかしのない影がテキストの右上に生じます。
H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }
text-shadowの値 |
|
