【css】box-shadowまとめ【解説付き】

解説付きでbox-shadowの基本をまとめています。
基本は{ box-shadow: 左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 内側指定; }ですが、具体的にどのような表示になるかを確認しながらタイピングできます。
関連タイピング
-
CSSでよく使うプロパティのタイピング
プレイ回数321英語長文584打 -
自分練習用、英語長文
プレイ回数2208英語長文1127打 -
初心者向けです。
プレイ回数6869英語546打 -
自作のハンバーガーメニューを作成しましょう!
プレイ回数3091英語長文721打 -
プレイ回数545長文385打
-
ワードプレスでよく使う分岐文です。
プレイ回数682長文記号1049打 -
html の基本16色
プレイ回数626206打 -
プレイ回数446長文91打
問題文
ふりがな非表示
ふりがな表示
(box-shadow: 3px 3px;)
右と下に3pxずつ伸びる
(box-shadow: 3px 3px 4px;)
影をぼかす
(box-shadow: 6px 6px 4px #ddd;)
影の色を変える
(box-shadow: 0 0 8px #444;)
上下左右均等に影をぼかす
(box-shadow: 10px 10px 15px -10px;)
影を小さくする
(box-shadow: 5px 5px 5px 10px rgba(0,0,0,0.2);)
影を大きくする
(box-shadow: 2px 2px 4px #444 inset;)
影を内側に出す
(box-shadow: 3px 3px 6px -2px #555,)
内側にも外側にも影を出す1
(3px 3px 8px rgba(255,255,255,0.8) inset;)
内側にも外側にも影を出す2(1と続けて書くと一つの要素に二つの影が出ます
(<img class=”shadow” src=”~” />)
画像に影をつける(classに影を設定しておくと反映されます)