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

解説付きでbox-shadowの基本をまとめています。
基本は{ box-shadow: 左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 内側指定; }ですが、具体的にどのような表示になるかを確認しながらタイピングできます。
関連タイピング
-
プレイ回数2754英語長文120秒
-
2カラムフレックスボックスのサンプルサイト
プレイ回数625英語長文630打 -
自分練習用、英語長文
プレイ回数2326英語長文1127打 -
初心者向けです。
プレイ回数6914英語546打 -
html border関連
プレイ回数520英字105打 -
jQuery基本例文集です。解説なしです。
プレイ回数927英語長文1554打 -
webクリエイター試験上級までカバー
プレイ回数5671長文英字1629打 -
解説なし、個人練習用につくりました。
プレイ回数679英語長文1054打
問題文
ふりがな非表示
ふりがな表示
(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に影を設定しておくと反映されます)