filter: shadow(***);
- ブラウザ
- 特性
- 独自拡張プロパティ
shadow は、やわらかい影を付けるフィルタです。（伸ばしたような影になります）
影の色や方向を指定することができます。
.example {
filter: shadow(color=red, direction=135);
}
| 属性 | 値と説明 |
|---|---|
| color | 影の色 （色の指定については、CSSの色指定をご覧ください） |
| direction | 影の方向 （45度単位） 0 = 上｜45 = 右上｜90 = 右｜135 = 右下｜180 = 下｜225 = 左下｜270 = 左｜315 = 左上 |
使用例
■フィルタなしの状態
<p><img src="example1.gif" alt="［サンプル］">
<img src="example2.gif" alt="［サンプル］"></p>
<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="example1.gif" alt="［サンプル］">
</div>
<p><img src="example2.gif" alt="［サンプル］" style="filter: shadow(color=red, direction=135);"></p>
<div style="font: bold 170% sans-serif; width: 100%; padding-bottom: 10px; filter: shadow(color=red, direction=135);">
フィルタの表示テスト
</div>
フィルタの表示テスト
■影の色
<div style="width: 100%; filter: shadow(color=#c0c0c0);">
<img src="example1.gif" alt="［サンプル］" style="margin: 0 0 10px 10px;">
</div>
<div style="font: bold 170% sans-serif; width: 10em; padding: 0 0 10px 10px; filter: shadow(color=#c0c0c0);">
フィルタの表示テスト
</div>
フィルタの表示テスト
- サイト内検索
