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

投稿者ueshin0620プレイ回数76
難易度(4.6) 315打 長文タグcss box-shadow 個人練習用
解説付きでbox-shadowの基本をまとめています。
基本は{ box-shadow: 左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 内側指定; }ですが、具体的にどのような表示になるかを確認しながらタイピングできます。

関連タイピング

問題文

ふりがな非表示 ふりがな表示

(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に影を設定しておくと反映されます)

◆コメントを投稿

※誹謗中傷、公序良俗に反するコメント、歌詞の投稿、宣伝行為は禁止です。

※このゲームにコメントするにはログインが必要です。

※コメントは日本語で投稿してください。

※歌詞のコメントは著作権侵害となります。投稿しないでください!

ueshin0620のタイピング

オススメの新着タイピング

タイピング練習講座 ローマ字入力表

人気ランキング

注目キーワード