要素を反射させる box reflect

反射について

要素を反射させるには、box-reflectプロパティを使用します。
反射効果は、幅やmargin、paddingなどの影響を受けず、突き抜けるような形になります。
（サンプルでは、余白の調整を行っています）

【構文】

							box-reflect:反射方向;
							または
							box-reflect:反射方向 反射までの距離;
							または
							box-reflect:反射方向 反射までの距離 マスク画像;
						

指定可能な「反射方向」の値

値	説明
above	上
below	下
left	左
right	右

• ※ Webkitの独自仕様ですので、Webkit以外での使用はできません。
• ※ 反射までの距離やマスク画像を省略した場合は反射までの距離が0、マスク画像は指定なしが初期値として設定されます。

サンプル

【CSS】

p.sample { -webkit-box-reflect:below 1px; }

マスクを使用するにはグラデーション（gradient）または画像で指定します。
ただし、マスク処理はグレースケールではなく透明度で処理します。
（画像をマスクとして指定する場合は、要素の幅にあわせて自動的にマスク画像が調整されて適用されます）

/* グラデーションの場合 */ p.sample { -webkit-box-reflect:below 1px -webkit-gradient(linear,left top,left bottom, from(transparent), to(#fff)); -webkit-box-reflect:below 1px linear-gradient(top, #fff, #000); } /* 画像の場合 */ p.sample { -webkit-box-reflect:below 1px url("img/mask.png"); }