CSS基礎 練習問題 22：CSSのボックスシャドウ
要素の外枠の内側に影（インセットシャドウ）ではなく、外側に薄いドロップシャドウ（影）をつけたい場合、正しいCSSの書き方はどれか。
- box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
- text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
- filter: shadow(2px 2px 5px);
- outline: 2px 2px 5px rgba(0, 0, 0, 0.3);
- border-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
正解と解説を見る
正解：box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
要素のボックス（枠）に影をつけるプロパティはbox-shadowであり、水平方向のオフセット・垂直方向のオフセット・ぼかしの範囲・色の順に指定します。
【正解の理由】
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);は、右に2px・下に2pxずれた位置に、ぼかし5px、半透明の黒色（透明度0.3）の影を要素の外側に表示する正しい指定です。
【不正解の理由】
• 「text-shadow」：要素内の文字（テキスト）に対して影をつけるプロパティであり、ボックス全体への影付けには使わない
• 「filter: shadow(...)」：shadowという関数はCSSのfilterプロパティには存在せず、影を表現する場合はdrop-shadow()という正しい構文が必要
• 「outline」：要素の外側に線を引くプロパティであり、ぼかしを伴う影の表現はできない
• 「border-shadow」：CSSに存在しないプロパティ名であり、無効な指定となる