Agile育成ブログ
未来を変える喜びを
CSS

box-shadow

要素に影をつけることができます。

右下に6pxずらして10pxぼかした半透明の黒い影

box-shadow: 右方向のずれ 下方向のすれ ぼかしの大きさ 拡張の大きさ 影の色

要素の外側に影をつける

box-shadow: 6px 6px 10px rgba(0,0,0.5);

要素の内側に影をつける

insetキーワードを記述することで要素の内側に影を付けることができます。

box-shadow: inset 0 0 10px 30px blue;