文字のドロップシャドウを指定するには?
要素書式
text-shadow: 【ドロップシャドウ指定】 [,【ドロップシャドウ指定】...] ;
対応ブラウザ
値一覧
ドロップシャドウ指定は複数指定することが可能です。
| 値 | 内容 |
| ドロップシャドウ指定 | none | 影を表示しません。 |
| 【影の色】 【影の水平位置】 【影の垂直位置】 【影のぼかし半径】 | 指定した内容の影を文字列に表示します。
「影の色」は最初にあっても最後にあっても構いません。 |
それぞれのドロップシャドウ指定で使用する値の意味は以下の通りです。
| 値 | 内容 |
| 影の色 | 文字列の影の色を指定します。省略可能です。
省略時にはChromeとSafariでは透明になりますが、OperaとFirefoxでは文字列と同じ色になります。 |
| 影の水平位置 | 指定された長さだけ、文字列から右にずれた位置に影を表示します。 |
| 影の垂直位置 | 指定された長さだけ、文字列から下にずれた位置に影を表示します。 |
| 影のぼかし半径 | 影のぼかし半径を指定します。
この値が大きいほど、影は薄くぼかされ、大きくなります。省略可能です。 |
解説文
text-shadowプロパティを指定すると、文字列に効果として影（ドロップシャドウ）をつけることができます。
影を指定するには、「影の色」と、「影の水平位置」、「影の垂直位置」、「影のぼかし半径」を指定します。「影の色」と「影のぼかし半径」は省略可能です。
「影の色」には表示する影の色を指定します。「影の色」は省略可能ですが、ブラウザによって省略時の既定の色が異なるので、複数のブラウザで同一の表示をさせる場合には明示的に指定する必要があります。
「影の水平位置」と「影の垂直位置」には、影をその値の分だけずらす長さを指定します。たとえば「7px 8px」と指定すると、文字列から右に7px、下に8pxずらした位置に影が表示されます。「影のぼかし半径」は、影のぼかしの程度を指定します。この値が大きいほど影は広く薄くぼかされて表示されます。
以下のように指定すると、緑色の影が、文字列から、右に5px、下に7pxずらした場所に、1pxのぼかし半径で表示されます。
text-shadow: green 5px 7px 1px;
同じ文字列に複数の影を付けることもできます。その場合には、影の設定をカンマで区切って、続けて指定します。
複数指定した場合、最初に指定した影が一番上になり、次の影がその下に重なり、以下順次、下に重なっていく形になります。
以下の例では緑の影に追加して、赤い影を表示しています。
text-shadow: green 5px 7px 1px, red 10px 10px;
サンプルソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#box1 {
font-size:2em;
text-shadow: 0.5em 0.5em blue;
}
#box2 {
font-size:2em;
text-shadow: 0.5em 0.5em blue, red -0.2em 0.7em 5px;
}
</style>
</head>
<body>
<p id="box1">右下に青い影を表示します</p>
<p id="box2">上に追加して左下に赤い影を表示します</p>
</body>
</html>
関連項目
