-webkit-box-reflect - soyjoynice @ ウィキ

要素を鏡面反射のように反転させて表示させることができる。
webkitだけをサポートするのであれば、これは非常に便利！

* * *
【基本】
-webkit-box-reflect: below;

　下に反射したものを配置。他に
　above（上に）、right（右に）、left（左に）。

【元要素と反射後要素の間隔を空けるには】
-webkit-box-reflect: below 10px;

　元のと反射後（下に出来る）の間に10pxの隙間が出来る。

【グラデーションエフェクト】
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(0.3, rgba(0,0,0,0)), to(rgba(0,0,0,1)));

　いつもの -webkit-gradient を、
　半角スペースの後ろに続けて書く事で実装できる。
　これは便利！

* * *
参考：
http://builder.japan.zdnet.com/html-css/sp_css-firefox-safari/20390572/3/