CSS基礎 練習問題 55:文字への影付け
文字に対して、右方向に2px、下方向に2pxずらした黒色の影をつけたい場合、正しいCSSの書き方はどれか。
- box-shadow: 2px 2px black;
- font-shadow: 2px 2px black;
- text-shadow: 2px 2px black;
- shadow-text: 2px 2px black;
- color-shadow: 2px 2px black;
正解と解説を見る
正解:text-shadow: 2px 2px black;
テキスト自体に影を付けるには `text-shadow` プロパティを使うのが正解です。
【正解の理由】
`text-shadow: X軸のずれ Y軸のずれ 色;` のように指定することで、文字の形に沿った影を付けることができます。
【不正解の理由】
• `box-shadow: 2px 2px black;` は、文字ではなく要素全体の四角い箱(ボックス)に影を付けるためのプロパティである
• `font-shadow: 2px 2px black;` は、`font-shadow` というプロパティは存在しないため無効である
• `shadow-text: 2px 2px black;` は、単語の順序が逆であり、CSSのプロパティ名として正しくない
• `color-shadow: 2px 2px black;` は、そのようなプロパティはCSSに存在しないため適用されない