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

解説付きでbox-shadowの基本をまとめています。
基本は{ box-shadow: 左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 内側指定; }ですが、具体的にどのような表示になるかを確認しながらタイピングできます。
関連タイピング
-
html の基本16色
プレイ回数623206打 -
個人練習用で作りました。解説なしです。
プレイ回数1226英語長文1140打 -
jQuery基本例文集です。解説なしです。
プレイ回数919英語長文1554打 -
h2やh3のデザインのcssです。解説なしです。
プレイ回数320英語長文980打 -
プレイ回数2622英語長文120秒
-
自作のハンバーガーメニューを作成しましょう!
プレイ回数3054英語長文721打 -
CSS 3 暗記用です。
プレイ回数988英語長文481打 -
フレックスボックスを覚えよう
プレイ回数3104長文英字242打
問題文
ふりがな非表示
ふりがな表示
(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に影を設定しておくと反映されます)