詳解逆引きHTML+CSS辞典

要素の領域 - 影をつけたい

登録タグ
Icon comment count 0
Icon stock count 0

影をつけたい

ドロップシャドウをつけたい/テキスト入力欄の内側に影をつけたい/影を消したい

box-shadowプロパティ inset ドロップシャドウ

ボックスに影をつけるには、box-shadowプロパティを使用します(テキストに影をつける場合はtext-shadowプロパティを使用します。詳細は「テキスト」の「影をつけたい(p.101)」参照)。

影の値には、「2〜4個の数値(単位つき)と色」を半角スペースで区切って指定します。数値は2〜4個を続けて指定し、色の値はそれらの数値全体の前または後ろに指定します。さらにそれら全体の前または後ろ(つまり値全体の先頭か末尾)にキーワード「inset」を指定すると、影はボックスの内側に表示されるようになります。

1つめの数値には、表示させる影を元のボックスの位置からどれだけ右にずらして表示させるかを単位をつけた実数で指定します(左にずらしたい場合はマイナスの値を指定します)。

2つめの数値には、表示させる影を元のボ

出典情報

Medium

詳解逆引きHTML+CSS辞典

  • 著者: 大藤 幹

コメント

    コメントはありません