【css】box-shadowまとめ【解説付き】
基本は{ box-shadow: 左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 内側指定; }ですが、具体的にどのような表示になるかを確認しながらタイピングできます。
関連タイピング
-
プレイ回数2755短文英字171打
-
プレイ回数104英語長文584打
-
プレイ回数496長文456打
-
プレイ回数5018英語546打
-
プレイ回数448長文645打
-
プレイ回数966英語長文1146打
-
プレイ回数1075英語長文1140打
-
プレイ回数280英語長文517打
問題文
ふりがな非表示
ふりがな表示
(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に影を設定しておくと反映されます)
コメント一覧