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

box-shadow


Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490

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

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

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

要素の外側に影をつける

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

要素の内側に影をつける

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

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

You cannot copy content of this page