CSSで影付き

枠の影：box-shadow

◯◯ { box-shadow: 左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 内側指定; }
例 .box {box-shadow: 3px 3px 4px -3px #000000}

基本

周囲に影

内側に影

周囲に影

「（3つ目の要素）ぼかし」の調整

「（4つ目の要素）広がり」の調整

「（3つ目の要素）ぼかし（0）」と「（4つ目の要素）広がり」の調整

「（3つ目の要素）ぼかし（4px）」と「（4つ目の要素）広がり」の調整

「（3つ目の要素）ぼかし（8px）」と「（4つ目の要素）広がり」の調整

透過画像の影：「filter: drop-shadow()」

画像はPNGとGIFの両方用意した（内容は同じだけど、ファイルの種類のみ異なる）

「box-shadow」でもいいけど・・・「filter: drop-shadow()」でやる。

透過PNG

<img src="〇〇〇" style="filter:drop-shadow(3px 3px 1px #000000);">

<img src="〇〇〇" style="filter:drop-shadow(3px 3px 3px #000000);">

<img src="〇〇〇" style="filter:drop-shadow(3px 3px 6px #000000);">

透過GIF

<img src="〇〇〇" style="filter:drop-shadow(3px 3px 3px #000000);">

「box-shadow」で透過画像に影

<img src="〇〇〇" style="box-shadow: 3px 3px 8px 3px #000000;">

文字の影：「text-shadow」

◯◯ { text-shadow: 左右の向きpx 上下の向きpx ぼかしpx 色; }
例 .text {text-shadow: 2px 2px 4px #666666; }

半透明な影