Mar. 7th,2021
プロパティについて
＃
概要
| 初期値 | “text-shadow: none;” |
| 適用対象 | テキスト |
| 継承 | Yes |
| パーセント値 | パーセント値は指定できません |
| 計算値 | “none”、もしくは4個の絶対長、算出された色、“inset”をアイテムとするリスト |
| アニメーション | 計算値(“none”はアイテムがないリストとして扱い、リスト・アイテムが不足する場合は空白の影(“transparent 0 0 0 0”)を付け加えます) |
“text-shadow”プロパティは要素内のテキストが落とす影を指定するプロパティです。
影は“inset”キーワードの有無によってテキストの外側、もしくは内側に落ちるように描画されます。
“inset”キーワードがない場合、影はテキストが浮き上がって見えるようにテキストの外側に描画されます。影は要素のボーダーと背景の上、テキストとそのテキスト装飾の下に描画されます。
“inset”キーワードがある場合、影はテキストが沈み込んでいるように見えるようにテキストの内側に描画されます。影は要素のテキストとそのテキスト装飾の上に描画されます。
隣接する要素のテキストが重なる場合は影はそのテキストよりも下に描画されます。また、“box-shadow”プロパティとは異なり、影がテキストに切り取られないのでテキストに透明の部分があればその下にも影が描画されます。
サンプルコード
p { text-shadow: rgb(204,153,204) 5px 5px 3px;}
＃
＃
複数の影の指定
“<shadow>”値をコンマ(“,”)で区切って並べて記述することで一つの要素に複数の影を設定することができます。最初に記述した影が最前面、最後に記述した影が最背面になるように、重ねて描画されます。
text-shadow:
〚一番手前の影の色〛 〚一番手前の影の垂直方向のオフセット〛 〚一番手前の影の水平方向のオフセット〛 〚一番手前の影のぼかし〛 〚幅〛,
〚手前から二番目の影の色〛 〚手前から二番目の影の垂直方向のオフセット〛 〚手前から二番目の影の水平方向のオフセット〛 〚手前から二番目の影のぼかし〛 〚幅〛,
〚手前から三番目の影の色〛 〚手前から三番目の影の垂直方向のオフセット〛 〚手前から三番目の影の水平方向のオフセット〛 〚手前から三番目の影のぼかし〛 〚幅〛,
...,
〚一番奥の影の色〛 〚一番奥の影の垂直方向のオフセット〛 〚一番奥の影の水平方向のオフセット〛 〚一番奥の影のぼかし〛 〚幅〛;
＃
使用例
＃
＃
＃
