shadow は、やわらかい影を付けるフィルタです。
（伸ばしたような影になります）
影の色や方向を指定できます。
#example {
filter: shadow(color=red, direction=135);
}
| color | 影の色 色の指定についてはスタイルシートの色指定をご覧ください。 |
|---|---|
| direction | 影の方向（45度単位） 0 = 上｜45 = 右上｜90 = 右｜135 = 右下｜180 = 下｜225 = 左下｜270 = 左｜315 = 左上 |
【フィルタなしの状態】
<img src="image/friend.gif" alt="IMG" width="170" height="140">
<img src="image/friend2.gif" alt="IMG" width="170" height="140">
<div style="font: bold 170% sans-serif; width: 100%;">
フィルタの表示テスト
</div>
【影の色・方向】
<div style="width: 100%; padding-bottom: 10px; filter: shadow(color=red, direction=135);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>
<div style="width: 100%; filter: shadow(color=red, direction=135);">
<img src="image/friend2.gif" alt="IMG" width="170" height="140">
</div>
<div style="font: bold 170% sans-serif; width: 100%; padding-bottom: 10px; filter: shadow(color=red, direction=135);">
フィルタの表示テスト
</div>
【影の色】
<div style="width: 100%; padding-left: 10px; padding-bottom: 10px; filter: shadow(color=#c0c0c0);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>
<div style="font: bold 170% sans-serif; width: 100%; padding-left: 10px; padding-bottom: 10px; filter: shadow(color=#c0c0c0);">
フィルタの表示テスト
</div>
